/* ============================================================================
   KING OF THE COURT — 1VS1 · Design Tokens
   Three-layer token system: primitives → semantic → component.
   Dark-mode native. Single neon-green accent. Athletic / cinematic.
   ============================================================================ */

:root {
  /* ---- 1. PRIMITIVES ---------------------------------------------------- */

  /* Neutrals (off-black, never pure #000) */
  --c-ink:        #0A0A0A;   /* deepest background */
  --c-ink-1:      #0E0E0E;   /* raised surface */
  --c-ink-2:      #141414;   /* card / input surface */
  --c-ink-3:      #1C1C1C;   /* hover surface */
  --c-line:       #262626;   /* hairline borders */
  --c-line-soft:  #1A1A1A;

  /* Text */
  --c-white:      #FFFFFF;
  --c-gray-100:   #EDEDED;
  --c-gray-300:   #B4B4B4;   /* secondary text — 8.6:1 on ink (AA) */
  --c-gray-500:   #7A7A7A;   /* tertiary / hints — 4.6:1 on ink (AA) */

  /* Accent — athletic neon green (single accent, used with discipline) */
  --c-green:      #1FE17A;
  --c-green-bright: #3BFF93;  /* press / active glow */
  --c-green-dim:  #15A85B;    /* pressed fill on light-on-dark */
  --c-green-ink:  rgba(31, 225, 122, 0.14); /* tint wash */
  --c-green-line: rgba(31, 225, 122, 0.32);

  /* Feedback */
  --c-danger:     #FF5A5A;   /* error text — 4.7:1 on ink */
  --c-danger-ink: rgba(255, 90, 90, 0.12);

  /* Scrims & shadows (tinted to background, never neon glow) */
  --scrim-top:    rgba(10, 10, 10, 0.10);
  --scrim-bottom: rgba(10, 10, 10, 0.92);
  --shadow-lift:  0 18px 50px -20px rgba(0, 0, 0, 0.85);
  --shadow-sheet: 0 -24px 60px -24px rgba(0, 0, 0, 0.9);

  /* ---- 2. SEMANTIC ------------------------------------------------------ */
  --bg:            var(--c-ink);
  --surface:       var(--c-ink-2);
  --surface-hover: var(--c-ink-3);
  --border:        var(--c-line);
  --border-strong: #333333;

  --text:          var(--c-white);
  --text-muted:    var(--c-gray-300);
  --text-faint:    var(--c-gray-500);

  --accent:        var(--c-green);
  --accent-press:  var(--c-green-bright);
  --on-accent:     var(--c-ink);   /* text/icon on a green fill */

  --focus-ring:    var(--c-green);

  /* ---- 3. TYPOGRAPHY ---------------------------------------------------- */
  --font-display: "Anton", "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Modular type scale (mobile-first, fluid where it matters) */
  --t-watermark:  0.6875rem;                       /* 11px */
  --t-eyebrow:    clamp(0.75rem, 0.7rem + 0.6vw, 0.95rem);
  --t-label:      0.8125rem;                        /* 13px */
  --t-body:       1rem;                             /* 16px — never below on mobile */
  --t-input:      1.125rem;                         /* 18px — avoids iOS auto-zoom */
  --t-sub:        clamp(0.95rem, 0.9rem + 1vw, 1.15rem);
  --t-step-q:     clamp(1.5rem, 1.1rem + 4vw, 2.25rem);   /* step question */
  --t-king:       clamp(0.95rem, 0.55rem + 2.2vw, 1.5rem); /* "KING OF THE COURT" */
  --t-hero:       clamp(5.5rem, 3rem + 26vw, 14rem);       /* "1VS1" monolith */

  --tracking-king:  0.42em;
  --tracking-wide:  0.18em;
  --tracking-tight: -0.02em;

  --leading-none:  0.92;
  --leading-body:  1.6;

  /* ---- 4. SPACING (4 / 8 rhythm) --------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.5rem;
  --s-8:  3rem;
  --s-10: 4rem;
  --s-12: 5rem;

  /* ---- 5. RADII & SIZING ------------------------------------------------ */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-pill: 999px;

  --slide-h:     64px;   /* slide track height */
  --slide-thumb: 56px;   /* slide thumb diameter */
  --tap-min:     44px;   /* min touch target */

  /* ---- 6. MOTION -------------------------------------------------------- */
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);   /* "expo.out" feel */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:    180ms;
  --dur-mid:     320ms;
  --dur-slow:    600ms;
  --dur-kenburns: 14s;

  /* ---- 7. LAYERS -------------------------------------------------------- */
  --z-bg:      0;
  --z-grain:   5;
  --z-stage:   10;
  --z-form:    40;
  --z-toast:   60;

  /* ---- 8. ENV ----------------------------------------------------------- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}