/* ============================================================================
   EcuTunerx — Design Tokens
   Single source of truth for color, type, space, motion, depth.
   Aesthetic: dark motorsport / telemetry HUD. Dyno-thermal accent (cyan→amber→red).
   ========================================================================== */

:root {
  /* ---- Core surfaces (deep-black OLED base) ---- */
  --bg:            #060708;
  --bg-2:          #090B0E;
  --surface:       #0E1116;
  --surface-2:     #141921;
  --surface-3:     #1B222C;
  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.16);

  /* ---- Glass ---- */
  --glass:         rgba(20, 25, 33, 0.55);
  --glass-2:       rgba(14, 17, 22, 0.65);
  --glass-border:  rgba(255, 255, 255, 0.10);
  --glass-blur:    16px;

  /* ---- Dyno-thermal accents ---- */
  --accent:        #19E6FF;   /* electric cyan — primary / "go" */
  --accent-ink:    #04181C;   /* text on cyan */
  --accent-2:      #FF6A1A;   /* performance amber — power/heat */
  --hot:           #FF2D55;   /* red — high stage / limit territory */
  --lime:          #B6FF3C;   /* sparingly: peak power highlight */

  --accent-soft:   rgba(25, 230, 255, 0.14);
  --accent-2-soft: rgba(255, 106, 26, 0.16);
  --hot-soft:      rgba(255, 45, 85, 0.16);

  /* Thermal gradient (used for power bars, dividers, glows) */
  --grad-thermal:  linear-gradient(90deg, #19E6FF 0%, #5BE7C4 28%, #B6FF3C 50%, #FF6A1A 78%, #FF2D55 100%);
  --grad-accent:   linear-gradient(120deg, #19E6FF 0%, #2BA8FF 100%);
  --grad-heat:     linear-gradient(120deg, #FF6A1A 0%, #FF2D55 100%);
  --grad-surface:  linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));

  /* ---- Text ---- */
  --text:          #EAF2F6;
  --text-dim:      #C2CDD6;
  --muted:         #9DAAB9;
  --faint:         #6B7686;

  /* ---- Status ---- */
  --ok:            #38E8A0;
  --warn:          #FFC53D;
  --danger:        #FF4D5E;

  /* ---- Typography ---- */
  --font-display:  "Syncopate", "Space Grotesk", system-ui, sans-serif;
  --font-body:     "Space Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:     "Space Mono", ui-monospace, "Cascadia Code", monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-display:    clamp(2rem, 1rem + 2.4vw, 3rem);
  --fs-h1:         clamp(2.4rem, 1.2rem + 4.6vw, 5rem);
  --fs-h2:         clamp(1.9rem, 1.2rem + 2.8vw, 3.4rem);
  --fs-h3:         clamp(1.3rem, 1rem + 1.3vw, 1.9rem);
  --fs-lead:       clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  --fs-body:       1rem;
  --fs-sm:         0.875rem;
  --fs-xs:         0.75rem;
  --fs-data:       clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem);

  --tracking-display: 0.04em;
  --tracking-label:   0.32em;
  --leading-tight:    1.05;
  --leading-body:     1.6;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;    --sp-11: 12rem;
  --section-y:    clamp(2.5rem, 1.6rem + 3vw, 4.75rem);
  --gutter:       clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --maxw:         1280px;
  --maxw-narrow:  920px;

  /* ---- Radius ---- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 16px;  --r-lg: 24px;  --r-xl: 32px;  --r-pill: 999px;

  /* ---- Depth / shadow ---- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 10px 30px -12px rgba(0,0,0,0.7);
  --shadow-lg:   0 30px 80px -28px rgba(0,0,0,0.85);
  --glow-cyan:   0 0 0 1px rgba(25,230,255,0.35), 0 0 32px -6px rgba(25,230,255,0.45);
  --glow-amber:  0 0 0 1px rgba(255,106,26,0.35), 0 0 32px -6px rgba(255,106,26,0.45);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   160ms;
  --dur:        260ms;
  --dur-slow:   520ms;

  /* ---- Z-index scale ---- */
  --z-grain: 1;
  --z-base: 10;
  --z-sticky: 40;
  --z-nav: 60;
  --z-overlay: 80;
  --z-modal: 100;
  --z-cursor: 120;
  --z-preloader: 200;
}

/* Honor reduced-motion globally by zeroing custom durations */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}