/* ============================================================
   YZTD · Design Tokens (prototype copy; source of truth = ../../tokens.css)
   Drop into a global stylesheet, or map into Tailwind (tailwind.theme.js).
   ============================================================ */
:root {
  /* ---- Color · core ---- */
  --ink:    #0B1230; /* deep navy · dark sections, footer, primary text on light */
  --royal:  #2F4BA0; /* primary brand blue · buttons, accents, headings accent */
  --azur:   #3D6BF5; /* electric · interaction only (hover/active/focus, 1 energy point) */
  --sky:    #6BA4DA; /* secondary accent · network edges, data labels, eyebrows-on-dark */
  --paper:  #F6F8FC; /* light section background */
  --mist:   #E5E9F2; /* lines, dividers, card borders, placeholder fills */
  --white:  #FFFFFF;

  /* ---- Color · text roles ---- */
  --text:         #0B1230;
  --text-mute:    #586079;
  --prose:        #26304D;
  --on-dark:      #E7ECF6;
  --on-dark-mute: #9AA6C4;

  /* ---- Color · derived ---- */
  --ink-2:        #121B40;
  --line-dark:    rgba(231,236,246,.14); /* hairline on dark */
  --on-dark-line: rgba(231,236,246,.42); /* button / menu-btn borders on dark (>=3:1 over --ink) */
  --sky-wash:     rgba(107,164,218,.1);  /* sky tint · mobile chips, social hover */
  --azur-wash:    rgba(61,107,245,.06);  /* azur tint · ghost-light hover */
  --azur-ring:    rgba(61,107,245,.40);  /* unified text-input focus ring (light + dark) */

  /* ---- Color · feedback ---- */
  --danger:    #C0392B; /* form errors on light surfaces (AA on white/paper) */

  /* ---- Typography ---- */
  --f-display: 'Space Grotesk', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-label:   'Space Grotesk', sans-serif; /* eyebrows, labels, stats: unified with display (was IBM Plex Mono) */

  /* ---- Label role · tracking + size scale (uppercase eyebrows/labels on --f-label) ---- */
  --track-eyebrow: .16em; /* primary uppercase eyebrow tracking */
  --track-label:   .08em; /* tag / stat-label tracking */
  --fs-label-xs:   11px;  /* small caps labels (meta, facts-card title, tags) */
  --fs-label-sm:   11.5px;/* compact labels (footer col, tag-diamond) */
  --fs-label:      12px;  /* default label / eyebrow size */

  /* ---- Layout ---- */
  --shell:  1320px; /* home (inner pages use 1200px via .yz-shell--inner) */
  --inner:  1200px;
  --read:   720px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 72px; /* header bar height · megamenu top offset · anchor scroll-margin base */

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 22px;

  /* ---- Elevation ---- */
  --shadow-card:  0 1px 2px rgba(11,18,48,.04);
  --shadow-hover: 0 18px 40px -20px rgba(11,18,48,.28);
  --shadow-nav:   0 28px 56px -28px rgba(11,18,48,.4); /* megamenu / header dropdown */

  /* ---- Z-index scale ---- */
  --z-header: 50;
  --z-skip:   1000;

  /* ---- Motion · one easing language across the system ---- */
  --ease-out:    cubic-bezier(.22, .61, .36, 1);  /* signature · scroll reveals + card lift */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* gentle overshoot · network node pop-in */
}