/* ==========================================================================
   Admissions Gateway — Design Tokens v4 (Manrope, one radius, no shadows)
   ========================================================================== */
:root {
  /* Color */
  --canvas:    #FFFFFF;
  --subtle:    #FAFAFA;
  --ink:       #0A0A0A;
  --sec:       #3A3A3A;
  --mut:       #6B6B6B;
  --faint:     #9A9A9A;
  --inv:       #FFFFFF;
  --inv-mut:   #A6A6A6;
  --bd:        #E7E7E7;
  --bd-strong: #D4D4D4;
  --d-hair:    #2A2A2A;
  --d-tile:    #151515;
  --ph-bg:     #F2F2F3;
  --ph-bd:     #E7E7E8;
  --ph-ic:     #C2C2C6;
  --grey-light:#F0F0F0;  --grey-mid:#B0B0B0;  /* brand-guideline greys */

  /* Radius — ONE value everywhere */
  --radius: 12px;
  --r-sm:   var(--radius);
  --r-md:   var(--radius);
  --r-lg:   var(--radius);
  --r-pill: var(--radius);

  /* Layout: full-spread nav, bounded readable content */
  --container: 1280px;
  --gutter:    clamp(24px, 5vw, 72px);
  --nav-pad:   clamp(20px, 4vw, 64px);

  /* Vertical rhythm */
  --pad-section: 96px;
  --pad-dark:    96px;
  --gap-head:    56px;

  /* Spacing scale */
  --s-2:2px; --s-4:4px; --s-6:6px; --s-8:8px; --s-10:10px; --s-12:12px;
  --s-14:14px; --s-16:16px; --s-18:18px; --s-20:20px; --s-24:24px; --s-28:28px; --s-32:32px;
  --s-40:40px; --s-48:48px; --s-56:56px; --s-64:64px; --s-80:80px;

  /* Type — Manrope across the board */
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Modular type scale (H1 one size smaller: ~60 max) */
  --fs-display: clamp(36px, 5vw, 60px);
  --fs-h2:      clamp(28px, 3.4vw, 42px);
  --fs-num:     clamp(38px, 4.6vw, 52px);
  --fs-num-xl:  clamp(52px, 7vw, 84px);
  --fs-title:   clamp(19px, 0.4vw + 17px, 21px);
  --fs-quote:   21px;
  --fs-body-l:  clamp(17px, 0.5vw + 16px, 19px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-label:   12px;

  /* ======================================================================
     TYPE SYSTEM  (Manrope only, monochrome). Documented role scale.
     Use the matching class in styles.css; never hardcode size/weight.
     Weights are limited to three:
       --fw-regular 400  · body, hero display H1
       --fw-medium  500  · section headings (h2/h3), labels, quotes
       --fw-semibold 600 · in-card titles, stat numbers, buttons, nav
     Roles (class -> token group):
       .h1 / .display  -> display   (hero H1, regular weight)
       .h2             -> h2        (section heading, medium)
       .h3             -> h3        (sub heading, medium)
       .h-title        -> card      (in-card title, semibold)
       .story-card__name / .seq-card__title -> card-xl (large on-card heading, semibold)
       .num            -> num       (stat figures, semibold)
       .tquote__text   -> quote     (pull quote, medium)
       .subtitle/.body-l -> body-l  (lead paragraph, regular)
       .body-m         -> body      (regular)
       .body-s/.caption-> small     (regular)
       .label          -> label     (mono uppercase eyebrow, medium)
     ====================================================================== */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* display / page H1 (hero) */
  --t-display-size: clamp(36px, 5vw, 60px); --t-display-lh: 1.05; --t-display-ls: -0.022em; --t-display-weight: var(--fw-regular);
  /* h2 section heading */
  --t-h2-size: clamp(28px, 3.4vw, 42px); --t-h2-lh: 1.12; --t-h2-ls: -0.018em; --t-h2-weight: var(--fw-medium);
  /* h3 sub heading */
  --t-h3-size: clamp(22px, 2.4vw, 28px); --t-h3-lh: 1.2; --t-h3-ls: -0.012em; --t-h3-weight: var(--fw-medium);
  /* card title (in-card) */
  --t-card-size: var(--fs-title); --t-card-lh: 1.3; --t-card-ls: -0.01em; --t-card-weight: var(--fw-semibold);
  /* card-xl: large on-card display heading (story name, why-card title) */
  --t-card-xl-size: clamp(30px, 3.8vw, 52px); --t-card-xl-lh: 1.06; --t-card-xl-ls: -0.022em; --t-card-xl-weight: var(--fw-semibold);
  /* stat numbers */
  --t-num-size: var(--fs-num); --t-num-lh: 1.0; --t-num-ls: -0.02em; --t-num-weight: var(--fw-semibold);
  /* pull quote */
  --t-quote-size: var(--fs-quote); --t-quote-lh: 1.42; --t-quote-ls: -0.01em; --t-quote-weight: var(--fw-medium);
  /* body large (lead paragraph) */
  --t-body-l-size: var(--fs-body-l); --t-body-l-lh: 1.6; --t-body-l-weight: var(--fw-regular);
  /* body */
  --t-body-size: var(--fs-body); --t-body-lh: 1.65; --t-body-weight: var(--fw-regular);
  /* small / caption */
  --t-small-size: var(--fs-small); --t-small-lh: 1.55; --t-small-weight: var(--fw-regular);
  /* label / eyebrow (mono uppercase) */
  --t-label-size: var(--fs-label); --t-label-lh: 1.3; --t-label-ls: 0.12em; --t-label-weight: var(--fw-medium);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --focus: 2px solid var(--ink);
}