/* ============================================================================
   GESDA DESIGN SYSTEM — TOKENS · Alumni portal v3
   v2.1 · design-system/designv2.1.md (approved 2026-09-02), §2–§8.

   This page's own copy, taken from experiences-page/v5/assets/css/tokens.css
   and kept separate from it: the two pages do not share a token file. The
   v5 tokens this page has no use for (the radar, photo and formats-window
   values) are left out; nothing is added.

   The ONLY file in this build permitted to contain raw colour values.
   portal.css and the map (map/alumni-map.html) both load it.
   ========================================================================= */

:root {

  /* -- §3.1 Primitives · purple ramp (ratios against #FFFFFF) ------------ */
  --purple-900: #27053D;   /* 17.9:1 */
  --purple-800: #420866;   /* 14.4:1 — hover on 700 */
  --purple-700: #530982;   /* 12.1:1 — the action colour */
  --purple-600: #5C0C8E;   /* 11.1:1 */
  --purple-300: #B570E0;   /*  3.3:1 — never body text on light */
  --purple-100: #DAB7EF;   /*  1.8:1 — fills, muted text on dark */
  --purple-050: #F7F2FD;   /*  1.1:1 — tinted canvas, ink on dark */

  --neutral-body:  #333840;
  --neutral-muted: #5A5560;

  /* -- §3.2 Primitives · platform colours ------------------------------- */
  --p4-orange: #F39323;   /* fill only on light */

  /* -- Graphics exception, user-approved 2026-09-24 (v5) ------------------
     Decorative only: here, the ring round the map's picked country, as
     round the picked point on v5's reach map. */
  --graphic-violet: #8A3FFC;

  /* -- §3.4 Semantics · light theme -------------------------------------- */
  --color-canvas:                #FFFFFF;
  --color-canvas-tinted:         var(--purple-050);
  --color-canvas-pressed:        var(--purple-100);
  --color-ink:                   var(--purple-900);
  --color-body:                  var(--neutral-body);
  --color-muted:                 var(--neutral-muted);
  --color-hairline:              rgba(39, 5, 61, 0.14);
  --color-hairline-soft:         rgba(39, 5, 61, 0.07);

  --color-action-primary:        var(--purple-700);
  --color-action-primary-hover:  var(--purple-800);
  --color-action-primary-active: var(--purple-900);
  --color-on-action:             #FFFFFF;
  --color-focus-ring:            var(--purple-700);
  --color-focus-glow:            rgba(83, 9, 130, 0.16);   /* §10.5 input focus */

  --color-white:                 #FFFFFF;
  --color-topbar:                rgba(255, 255, 255, 0.72);
  --color-topbar-sheen:          rgba(255, 255, 255, 0.4);

  /* -- §3.6 Dark theme semantics · the footer band ------------------------ */
  --color-canvas-dark:      var(--purple-900);
  --color-ink-on-dark:      var(--purple-050);   /* 16.2:1 on purple-900 */
  --color-body-on-dark:     var(--purple-100);   /* 10.2:1 on purple-900 */
  --color-muted-on-dark:    var(--purple-300);   /*  5.4:1 on purple-900 */
  --color-hairline-on-dark: rgba(247, 242, 253, 0.16);
  --color-focus-ring-dark:  var(--purple-300);

  /* The footer's local dark theme (.theme-dark, as v5's base.css) */
  --color-hairline-on-band-soft: rgba(247, 242, 253, 0.12);
  --color-wash-on-band:          rgba(255, 255, 255, 0.10);
  --color-wash-on-band-strong:   rgba(255, 255, 255, 0.18);

  /* -- §3.5 Status ------------------------------------------------------- */
  --color-error: #B3122B;

  /* -- §4 Typography ----------------------------------------------------- */
  --font-display: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    var(--font-display);
  --font-accent:  "Space Grotesk", "DM Sans", system-ui, sans-serif;

  --type-h1:         clamp(2rem, 3.5vw, 2.75rem);
  --type-h2:         clamp(1.5rem, 2.5vw, 1.875rem);
  --type-h3:         clamp(1.25rem, 1.8vw, 1.5rem);
  --type-h4:         1.125rem;
  --type-lead:       1.125rem;
  --type-body:       1rem;
  --type-body-sm:    0.875rem;
  --type-label:      0.875rem;
  --type-button:     1rem;
  --type-eyebrow:    0.6875rem;
  --type-data-label: 0.875rem;
  --type-caption:    0.8125rem;

  /* -- §5 Spacing · 4px base --------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --layout-container-max:    1200px;
  --layout-container-narrow: 760px;
  --layout-topbar:           64px;           /* 76px from tablet up */

  /* -- §6 Shape ---------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* -- §7 Elevation · purple-tinted, never neutral black ----------------- */
  --shadow-sm: 0 2px 8px rgba(39, 5, 61, 0.06);
  --shadow-md: 0 8px 24px rgba(39, 5, 61, 0.10);

  /* -- §8 Motion --------------------------------------------------------- */
  --motion-fast:   160ms ease-out;
  --motion-medium: 260ms ease;
  --motion-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) { :root { --layout-topbar: 76px; } }

/* §8.3 Reduced motion. Nothing on this page starts hidden or offset, so
   every element is already in its final state without motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}