/* ============================================================
   MATCHPOINT — Design Tokens
   Dark-luxury editorial. Restrained palette: near-black + white
   + electric blue + violet. (10K Checklist #3: restraint)
   ============================================================ */

:root {
  /* ---- Core surfaces (near-black, faint blue cast) ---- */
  --bg:            #06070d;   /* page base */
  --bg-2:          #090b13;   /* alt section */
  --surface:       #0c0e18;   /* card base */
  --surface-2:     #11141f;   /* elevated card */
  --surface-3:     #171a27;   /* hover / input */
  --line:          rgba(255, 255, 255, 0.08);
  --line-2:        rgba(255, 255, 255, 0.14);
  --line-strong:   rgba(255, 255, 255, 0.22);

  /* ---- Text ---- */
  --text:          #f5f7fc;   /* primary */
  --text-2:        #aab2c7;   /* secondary */
  --text-3:        #7d859d;   /* tertiary / muted — AA on surfaces */
  --text-4:        #474d63;   /* faint labels, ghost numbers */

  /* ---- Brand accents ---- */
  --blue:          #4f7bff;
  --blue-bright:   #6d92ff;
  --violet:        #a06bff;
  --violet-bright: #b78cff;
  --cyan:          #57d4ff;   /* sparing third accent for data only */

  /* tinted helpers */
  --blue-12:       rgba(79, 123, 255, 0.12);
  --blue-20:       rgba(79, 123, 255, 0.20);
  --blue-40:       rgba(79, 123, 255, 0.40);
  --violet-12:     rgba(160, 107, 255, 0.12);
  --violet-20:     rgba(160, 107, 255, 0.20);

  /* ---- Signature gradient ---- */
  --grad: linear-gradient(115deg, var(--blue) 0%, var(--violet) 100%);
  --grad-soft: linear-gradient(115deg, var(--blue-bright), var(--violet-bright));
  --grad-text: linear-gradient(100deg, #cdd9ff 0%, var(--blue-bright) 38%, var(--violet-bright) 100%);

  /* ---- Semantic status ---- */
  --ok:     #54e6a8;
  --warn:   #ffcc66;
  --danger: #ff6b81;
  --ok-12:     rgba(84, 230, 168, 0.13);
  --warn-12:   rgba(255, 204, 102, 0.13);
  --danger-12: rgba(255, 107, 129, 0.13);

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "SF Pro Display", system-ui, sans-serif;
  --font-body:    "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale (clamp: min, vw, max) */
  --fs-display: clamp(2.85rem, 1.4rem + 6.4vw, 7rem);
  --fs-h1:      clamp(2.25rem, 1.3rem + 4.1vw, 4.4rem);
  --fs-h2:      clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);
  --fs-h3:      clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem);
  --fs-h4:      clamp(1.12rem, 1rem + 0.5vw, 1.35rem);
  --fs-lg:      clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.78rem;
  --fs-mono:    0.72rem;   /* labels */

  --lh-tight: 0.98;
  --lh-snug:  1.12;
  --lh-body:  1.62;
  --tracking-label: 0.22em;

  /* ---- Spacing scale (8pt rhythm) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 160px;

  /* Section vertical rhythm */
  --section-y: clamp(72px, 9vw, 144px);
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ---- Radii ---- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadows + glows ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 18px 50px -20px rgba(0,0,0,0.7);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,0.8);
  --glow-blue:   0 0 0 1px var(--blue-20), 0 24px 70px -28px rgba(79,123,255,0.55);
  --glow-violet: 0 0 0 1px var(--violet-20), 0 24px 70px -28px rgba(160,107,255,0.5);
  --glow-card:   0 30px 80px -40px rgba(79,123,255,0.45), 0 0 0 1px var(--line);

  /* ---- Motion ---- */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);     /* smooth deceleration */
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t-mid: 260ms;
  --t-slow: 460ms;

  /* ---- Layering ---- */
  --z-bg: 0; --z-base: 1; --z-sticky: 40; --z-nav: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 1100;

  color-scheme: dark;
}