/* ============================================================
   TYPINGAURA — variables.css
   Design Tokens: Every color, size, font, spacing, timing value
   lives here. Nothing is hardcoded in any other CSS file.
   Site: alternateincomesource.com/tools/typing-speed-test/
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     BACKGROUND COLORS
  ---------------------------------------------------------- */
  --bg-page:        #07070f;   /* deepest background — page base */
  --bg-surface:     #0e0e1a;   /* card / panel base */
  --bg-elevated:    #15152a;   /* raised elements, keyboard bg */
  --bg-input:       #1a1a30;   /* typing area background */
  --bg-overlay:     rgba(7, 7, 15, 0.85); /* modal / overlay */

  /* ----------------------------------------------------------
     NEON COLOR PALETTE
  ---------------------------------------------------------- */
  --neon-blue:      #00aaff;   /* left keyboard zone */
  --neon-purple:    #aa44ff;   /* center keyboard zone */
  --neon-cyan:      #00e5ff;   /* right keyboard zone */
  --neon-green:     #00ff88;   /* correct key / success */
  --neon-red:       #ff2255;   /* error key / mistake */
  --neon-gold:      #ffcc00;   /* streak / personal best */
  --neon-white:     #e8e8ff;   /* achievement flash */
  --neon-orange:    #ff8800;   /* warning / caution */

  /* Glow shadow versions (used in box-shadow) */
  --glow-blue:      0 0 8px #00aaff, 0 0 20px rgba(0,170,255,0.4);
  --glow-purple:    0 0 8px #aa44ff, 0 0 20px rgba(170,68,255,0.4);
  --glow-cyan:      0 0 8px #00e5ff, 0 0 20px rgba(0,229,255,0.4);
  --glow-green:     0 0 8px #00ff88, 0 0 20px rgba(0,255,136,0.4);
  --glow-red:       0 0 8px #ff2255, 0 0 20px rgba(255,34,85,0.4);
  --glow-gold:      0 0 8px #ffcc00, 0 0 24px rgba(255,204,0,0.5);

  /* ----------------------------------------------------------
     TEXT COLORS
  ---------------------------------------------------------- */
  --text-primary:   #e0e0f5;   /* main readable text */
  --text-secondary: #8888bb;   /* labels, captions */
  --text-muted:     #44445a;   /* placeholder, disabled */
  --text-correct:   #00ff88;   /* correctly typed character */
  --text-error:     #ff2255;   /* incorrectly typed character */
  --text-pending:   #44445a;   /* not yet typed character */
  --text-cursor:    #00e5ff;   /* cursor color */
  --text-highlight: #ffffff;   /* active / current character */

  /* ----------------------------------------------------------
     BORDER COLORS
  ---------------------------------------------------------- */
  --border-subtle:  rgba(255,255,255,0.06);
  --border-normal:  rgba(255,255,255,0.12);
  --border-active:  rgba(0,229,255,0.4);
  --border-error:   rgba(255,34,85,0.5);

  /* ----------------------------------------------------------
     KEYBOARD DIMENSIONS
  ---------------------------------------------------------- */
  --key-unit:       42px;      /* 1u = one standard key width */
  --key-height:     42px;      /* standard key height */
  --key-gap:        4px;       /* gap between keys */
  --key-radius:     5px;       /* key corner radius */
  --key-font-size:  11px;      /* label inside key */

  /* Zone color assignments */
  --key-zone-left:  var(--neon-blue);
  --key-zone-mid:   var(--neon-purple);
  --key-zone-right: var(--neon-cyan);

  /* Key surface colors */
  --key-bg:         #1c1c30;   /* idle key background */
  --key-bg-hover:   #242440;   /* hover state */
  --key-bg-active:  #2a2a50;   /* pressed state */
  --key-border:     rgba(255,255,255,0.08);

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                 'Courier New', monospace;
  --font-display:'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-ui:     'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Type scale */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --typing-line-height: 44px;   /* fixed px so the 3-line viewport height and
                                    scroll offset can be computed exactly */
  --text-3xl:   48px;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.9;

  /* ----------------------------------------------------------
     SPACING SCALE
  ---------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     Z-INDEX SCALE
  ---------------------------------------------------------- */
  --z-base:      1;
  --z-keyboard:  10;
  --z-ui:        20;
  --z-modal:     50;
  --z-toast:     60;
  --z-top:       100;

  /* ----------------------------------------------------------
     ANIMATION TIMING
  ---------------------------------------------------------- */
  --dur-instant:    80ms;
  --dur-fast:       150ms;
  --dur-normal:     300ms;
  --dur-slow:       500ms;
  --dur-ambient:    3000ms;
  --dur-ripple:     300ms;
  --dur-result:     80ms;    /* stagger between result cards */
  --dur-achieve:    600ms;

  --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --max-width:      1200px;
  --content-width:  900px;
  --header-height:  64px;
}

/* ----------------------------------------------------------
   REDUCED MOTION — disable all transitions and animations
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant:   0ms;
    --dur-fast:      0ms;
    --dur-normal:    0ms;
    --dur-slow:      0ms;
    --dur-ambient:   0ms;
    --dur-ripple:    0ms;
    --dur-result:    0ms;
    --dur-achieve:   0ms;
  }
}