/* ===========================================================================
   tokens.css — :root custom properties ONLY
   ---------------------------------------------------------------------------
   Reverse-engineered from the Figma (which has no bound variables). This is
   the authoritative token layer: main.css and every partial reference these,
   never raw hex.

   ACCESSIBILITY NOTE (WCAG 2.1 AA):
   Several muted grays from the design fail 4.5:1 on white. Per the brief they
   are darkened here to pass AA; the original design hex is kept in a comment
   beside each so the visual intent is traceable.
   =========================================================================== */

:root {
  /* --- brand / accent ------------------------------------------------------ */
  /* Rebranded to teal (client): buttons/accents teal, navy -> dark teal. */
  --color-primary:        #008080;   /* teal — active nav, dividers, section rules, social (AA white 4.77:1) */
  --color-primary-hover:  #006666;   /* darker teal */
  --color-btn:            #008080;   /* button fills — teal, white text 4.77:1 (AA) */
  --color-btn-hover:      #006666;   /* darker teal for :hover */
  --color-social:         #009e9e;   /* footer social icons (teal) */
  --color-accent-red:     #c50227;   /* section-title underline (kept) */
  --color-highlight:      #8dd7e5;   /* stat labels (cyan) — on dark teal, high contrast */
  --color-badge:          #a1208d;   /* SMART CAMPUS button (magenta, kept as distinct CTA) */
  --color-badge-hover:    #871a77;   /* darken badge ~10% */

  /* --- navy / ink ---------------------------------------------------------- */
  /* "navy" tokens rebranded to dark teal (client). Names kept to avoid churn. */
  --color-navy-topbar:    #004242;
  --color-navy-stats:     #013b3b;
  --color-navy-hero:      #013f3f;
  --color-navy-section:   #003838;
  --color-heading:        #004242;
  --color-heading-alt:    #006e6e;
  --color-title-blue:     #004242;
  --color-name-ink:       #00302f;

  /* --- neutrals / surfaces ------------------------------------------------- */
  --color-white:          #ffffff;
  --color-bg-light:       #efefef;
  --color-bg-tab:         #f7f7f7;
  --color-bg-pale:        #f6f9ff;
  --color-footer:         #181818;
  --color-copyright:      #202020;

  /* --- text ---------------------------------------------------------------- */
  --color-text-body:      #666666;   /* design #8c8c8c — darkened for AA on white AND on #efefef */
  --color-text-muted:     #6f6f6f;   /* design #8d8d8d — darkened for AA on white */
  --color-text-meta:      #6a6a6a;   /* design #959595 — darkened for AA (dates, 13px) */
  --color-text-card:      #5c6273;   /* design #666d81 — slightly darkened, safe AA on white */
  --color-text-lavender:  #cfe8e8;   /* on dark teal — light on dark, passes */
  --color-text-footaddr:  #ababab;   /* on #181818 footer — light on dark, passes */
  --color-text-copy:      #9a9a9a;   /* design #838383 on #202020 — lightened for AA on dark */
  --color-footer-link:    #b0b0b0;   /* footer column links on #181818 — AA on dark */
  --color-icon-muted:     #96a2b8;
  --color-divider:        #97989d;
  --color-border-card:    rgba(0, 0, 0, 0.04);

  /* --- scrims / overlays / shadows ---------------------------------------- */
  --scrim-header:       rgba(0, 0, 0, 0.60);
  --scrim-hero:         rgba(1, 1, 1, 0.38);
  --hero-panel:         rgba(1, 63, 63, 0.82);    /* dark-teal gradient panel */
  --hero-panel-fade:    rgba(1, 63, 63, 0);
  --overlay-management: rgba(0, 48, 48, 0.86);    /* dark teal over mgmt bg image */
  --overlay-stats:      rgba(1, 59, 59, 0.90);    /* dark teal over stats bg image */
  --shadow-card:        0 0 10px rgba(3, 59, 74, 0.10);
  --shadow-soft:        0 6px 22px rgba(0, 0, 0, 0.08);
  --shadow-header:      0 1px 4px rgba(0, 0, 0, 0.10);
  --nav-panel-divider:  rgba(0, 0, 0, 0.08);        /* mobile nav item hairlines (white bar) */
  --nav-submenu-bg:     rgba(0, 0, 0, 0.03);        /* mobile submenu inset panel (white bar) */
  --nav-submenu-hover:  rgba(0, 0, 0, 0.06);
  --hero-nav-bg:        rgba(0, 0, 0, 0.32);       /* hero arrow buttons */
  --hero-nav-bg-hover:  rgba(0, 0, 0, 0.55);
  --shadow-text:        0 2px 12px rgba(0, 0, 0, 0.35); /* hero heading legibility */
  --border-on-dark:     rgba(255, 255, 255, 0.15);      /* dividers on dark teal panels */

  /* --- typography: families ------------------------------------------------ */
  --font-poppins: "Poppins", system-ui, sans-serif;      /* primary */
  --font-display: "Playfair Display SC", Georgia, serif;  /* hero heading only */
  --font-roboto:  "Roboto", system-ui, sans-serif;        /* Management + View More */
  --font-inter:   "Inter", system-ui, sans-serif;         /* Home nav + stat numbers */
  --font-jost:    "Jost", system-ui, sans-serif;          /* stat labels */

  /* --- typography: fluid type ramp ---------------------------------------- */
  --fs-display: clamp(2.25rem, 4vw, 3.125rem);   /* hero / mgmt H1  ~36–50 */
  --fs-h1:      clamp(1.75rem, 3vw, 2.375rem);   /* principal      ~28–38 */
  --fs-h2:      clamp(1.5rem, 2.5vw, 1.8125rem); /* section titles ~24–29 */
  --fs-h3:      1.375rem;   /* 22 */
  --fs-h4:      1.1875rem;  /* 19 */
  --fs-lg:      1.125rem;   /* 18 */
  --fs-base:    1rem;       /* 16 */
  --fs-sm:      0.9375rem;  /* 15 */
  --fs-xs:      0.8125rem;  /* 13 */
  --lh-tight: 1.3;
  --lh-base:  1.6;

  /* --- radius -------------------------------------------------------------- */
  --radius-sm:    2px;   /* buttons */
  --radius-md:    3px;   /* event thumbs */
  --radius-lg:    5px;   /* tour tiles, view-more */
  --radius-panel: 12px;
  --radius-full:  999px;

  /* --- spacing ------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;

  /* --- layout -------------------------------------------------------------- */
  --container-max: 1360px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
  --section-pad:   clamp(3rem, 6vw, 5.5rem); /* uniform vertical rhythm */

  /* --- motion -------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* --- z-index scale ------------------------------------------------------- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-mobile-nav: 1000;
}