/* ============================================================
   TCA WEBSITE — CSS VARIABLES & RESET
   Brand: recolored to the "base-*" token system (grape/cherry/lemon
   family). Structural roles below (--navy-*, --crimson-*, --gold-*)
   are DERIVED from the new base tokens, not the old navy/gold/crimson
   hues — this is intentional so every component in sections.css,
   hero.css, nav.css, base.css, pages.css, and admin.css picks up the
   new brand automatically without having to touch each file.
   ============================================================ */

:root {
  /* ---- Base tokens (client-specified palette, verbatim) ---- */
  --base-cherry:        #FB3C44;
  --base-grape:         #7D74FF;
  --base-lemon:         #F9CF00;
  --base-lime:          #3FBB46;
  --base-pink:          #FA61BA;
  --base-teal:          #14B898;
  --blue-link:          #0064D1;
  --border-ui-emphasis: #E2E5E9;

  /* ---- Primary Brand: Grape (replaces navy) ----
     Same hue as --base-grape, with saturation/lightness tuned per
     role so nav/footer/hero backgrounds stay dark enough for white
     text, and headings stay dark enough for AA contrast on white. */
  --navy:          #0a58ad;
  --navy-light:    #0069da;
  --navy-dark:     #002246;

  /* ---- Accent: Cherry (replaces crimson) ---- */
  --crimson:       #E6050E;   /* CTA red — AA-safe with white text */
  --crimson-lighter: #FB7479; /* light coral — default btn-primary bg (paired with dark navy text) */
  --crimson-light: #FB3C44;   /* raw cherry — hover / lighter state */
  --crimson-dark:  #BE040C;   /* darkest — gradients, hover-dark */

  /* ---- Accent: Gold (derived from lemon) ---- */
  --gold:          #FAD000;   /* raw lemon — non-text accents (borders, dots) */
  --gold-light:    #FFDE3D;   /* bright — text on dark backgrounds only */
  --gold-dark:     #816C03;   /* deep mustard — AA-safe accent text on white */

  /* ---- Icon chip background (recolored to match the grape brand) ---- */
  --icon-bg:       #E5E3F7;
  --icon-fg:       #0a58ad;

  /* ---- Categorical accents (badges, calendar events, tags) ----
     Each pair is a light tint + AA-safe dark text derived from one
     base token, so status/category colors stay legible without
     borrowing the structural brand hues above. */
  --tag-blue-bg:   #E3EDF7; --tag-blue-text:   #004EA3; /* enrollment */
  --tag-lemon-bg:  #F7F4E3; --tag-lemon-text:  #7A6600; /* registration */
  --tag-lime-bg:   #E8F2E9; --tag-lime-text:   #297A2E; /* academic */
  --tag-pink-bg:   #F6E4EF; --tag-pink-text:   #9E055E; /* event */
  --tag-cherry-bg: #F7E4E5; --tag-cherry-text: #A0030A; /* urgent */
  --tag-teal-bg:   #E5F5F2; --tag-teal-text:   #0C6E5B; /* extra / neutral-positive */

  /* ---- Accent: Green (primary CTA color, replaces the coral
     crimson-lighter previously used for .btn-primary/.nav-cta) ----
     Derived from --base-lime, the client token that already existed
     but wasn't wired into any structural role yet. Light/dark
     variants computed by lightness shift at constant hue/saturation
     (not eyeballed), same approach as the gold/crimson variants
     above. navy-dark on the base green is 6.4:1 contrast (passes
     AAA); white text on the base green is only 2.5:1 — don't put
     white text directly on --green, use --green-dark or navy-dark
     text instead (see .btn-primary for the working example). */
  --green:         #3FBB46;   /* = --base-lime */
  --green-light:   #6ACD70;   /* hover state */
  --green-dark:    #2A7E2F;   /* text-safe dark variant, white passes AA on this */

  /* ---- Neutrals ---- */
  --white:         #ffffff;
  --off-white:     #f6f7fb;   /* Slightly cool tint to match blue theme */
  --text-dark:     #1a1a2e;
  --text-muted:    #555570;
  --border:        var(--border-ui-emphasis);

  /* ---- Typography ---- */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Raleway', sans-serif;

  /* ---- Spacing ---- */
  --section-pad:   90px 3rem;
  --max-width:     1200px;
  --nav-height:    70px;

  /* ---- Misc ---- */
  --radius-sm:     3px;
  --radius-md:     4px;
  --transition:    0.2s ease;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }