/*
 * Custom RainTech styles overriding the default Tailwind base.
 *
 * This file defines CSS variables for the RainTech colour palette, imports the
 * Plus Jakarta Sans typeface, and applies sensible defaults to headings,
 * body text, links and form controls.  It also exposes utility classes for
 * using the brand colours directly in your markup (e.g. class="bg-rt-blue-royal text-rt-white-ghost").
 */

/* Define custom properties for each brand colour.  These variables can
   easily be reused throughout the theme, both in this file and in your
   own CSS rules. */
:root {
  --rt-green-primary: #79C600;
  --rt-green-bright: #8BDB02;
  --rt-blue-cetacean: #001647;
  --rt-blue-royal: #05108E;
  --rt-blue-sky: #20BAE7;
  --rt-white-ghost: #F7F7FF;
  --rt-violet-bright: #C616EA;
  --rt-gray: #97999B;
  --rt-black: #000000;
}

/* Global body styles: apply the primary font, a calm text colour and a
   light background. */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--rt-blue-cetacean);
  background-color: var(--rt-white-ghost);
  line-height: 1.6;
}

/* Heading hierarchy uses the heading weight and RainTech blue. */
h1,
h2,
h3,
h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--rt-blue-royal);
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.2;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; font-weight: 700; }

/* Paragraph and list spacing for improved readability. */
p,
ul,
ol {
  margin-bottom: 1rem;
}

/* Link styling using the sky blue with a green hover state. */
a {
  color: var(--rt-blue-sky);
  text-decoration: underline;
  text-underline-position: under;
}
a:hover {
  color: var(--rt-green-primary);
}

/* Form controls: subtle borders using the RainTech grey.  Add padding for
   comfortable click targets. */
input,
textarea,
select {
  border: 1px solid var(--rt-gray);
  padding: 0.5rem;
  border-radius: 0.25rem;
  font-family: inherit;
}

/* Utility classes for backgrounds.  Apply these classes directly to
   elements to set their background colour. */
.bg-rt-green-primary { background-color: var(--rt-green-primary) !important; }
.bg-rt-green-bright { background-color: var(--rt-green-bright) !important; }
.bg-rt-blue-cetacean { background-color: var(--rt-blue-cetacean) !important; }
.bg-rt-blue-royal { background-color: var(--rt-blue-royal) !important; }
.bg-rt-blue-sky { background-color: var(--rt-blue-sky) !important; }
.bg-rt-white-ghost { background-color: var(--rt-white-ghost) !important; }
.bg-rt-violet-bright { background-color: var(--rt-violet-bright) !important; }
.bg-rt-gray { background-color: var(--rt-gray) !important; }
.bg-rt-black { background-color: var(--rt-black) !important; }

/* Utility classes for text colours. */
.text-rt-green-primary { color: var(--rt-green-primary) !important; }
.text-rt-green-bright { color: var(--rt-green-bright) !important; }
.text-rt-blue-cetacean { color: var(--rt-blue-cetacean) !important; }
.text-rt-blue-royal { color: var(--rt-blue-royal) !important; }
.text-rt-blue-sky { color: var(--rt-blue-sky) !important; }
.text-rt-white-ghost { color: var(--rt-white-ghost) !important; }
.text-rt-violet-bright { color: var(--rt-violet-bright) !important; }
.text-rt-gray { color: var(--rt-gray) !important; }
.text-rt-black { color: var(--rt-black) !important; }

/* Utility classes for borders. */
.border-rt-green-primary { border-color: var(--rt-green-primary) !important; }
.border-rt-green-bright { border-color: var(--rt-green-bright) !important; }
.border-rt-blue-cetacean { border-color: var(--rt-blue-cetacean) !important; }
.border-rt-blue-royal { border-color: var(--rt-blue-royal) !important; }
.border-rt-blue-sky { border-color: var(--rt-blue-sky) !important; }
.border-rt-white-ghost { border-color: var(--rt-white-ghost) !important; }
.border-rt-violet-bright { border-color: var(--rt-violet-bright) !important; }
.border-rt-gray { border-color: var(--rt-gray) !important; }
.border-rt-black { border-color: var(--rt-black) !important; }