/* ==========================================================================
   Shatter — Design Tokens
   Generated: 2026-04-04
   Base unit: 4px | Type ratio: ~1.25 (Major Third)
   All text/background pairs verified WCAG AA (≥4.5:1)
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------
     COLOR PALETTE
     Base background: deep navy #0a0e27
     All foreground colors tested against --color-neutral-900
     ------------------------------------------------------------------- */

  /* Primary — Bright Cyan (interactive elements, paddle, buttons) */
  --color-primary:          #00e5ff;   /* 12.4:1 vs neutral-900 */
  --color-primary-dark:     #007c91;   /* used as btn hover bg; 4.9:1 w/ white text */

  /* Secondary — Soft Purple (power-ups, accents) */
  --color-secondary:        #ce93d8;   /* 8.0:1 vs neutral-900 */
  --color-secondary-dark:   #9c27b0;   /* deep purple for pressed states */

  /* Neutral scale — dark-first for a dark-themed game */
  --color-neutral-900:      #0a0e27;   /* deep navy — primary background */
  --color-neutral-800:      #1a1a3e;   /* dark indigo — gradient end / cards */
  --color-neutral-700:      #2a2a5e;   /* mid-dark — borders, dividers */
  --color-neutral-100:      #e0e0e0;   /* light gray — muted text */
  --color-neutral-50:       #ffffff;   /* white — primary text, ball */

  /* Semantic — Success / Warning / Error */
  --color-success:          #69f0ae;   /* 13.3:1 vs neutral-900 */
  --color-warning:          #ffb300;   /* 10.6:1 vs neutral-900 */
  --color-error:            #ef5350;   /*  5.5:1 vs neutral-900 */

  /* -------------------------------------------------------------------
     TYPOGRAPHY — Modular scale ~1.25 (Major Third)
     Base: 16px (1rem)
     ------------------------------------------------------------------- */
  --font-family:            'Segoe UI', system-ui, -apple-system, sans-serif;

  --font-size-xs:           0.8rem;    /* 12.8px — fine print, badges       */
  --font-size-sm:           1rem;      /* 16px   — HUD text, body (base)    */
  --font-size-md:           1.25rem;   /* 20px   — overlay body, buttons    */
  --font-size-lg:           1.563rem;  /* 25px   — sub-headings             */
  --font-size-xl:           3rem;      /* 48px   — overlay titles, hero     */

  --font-weight-normal:     400;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;

  --line-height-tight:      1.2;
  --line-height-normal:     1.5;

  --letter-spacing-wide:    0.125em;   /* 2px at 16px — overlay titles */

  /* -------------------------------------------------------------------
     SPACING — 4px base grid, 7 steps
     ------------------------------------------------------------------- */
  --spacing-1:              4px;
  --spacing-2:              8px;
  --spacing-3:              12px;
  --spacing-4:              16px;
  --spacing-6:              24px;
  --spacing-8:              32px;
  --spacing-12:             48px;

  /* -------------------------------------------------------------------
     BORDER RADII
     ------------------------------------------------------------------- */
  --radius-sm:              4px;       /* bricks, small chips           */
  --radius-md:              8px;       /* buttons, cards                */
  --radius-lg:              16px;      /* overlays, modals, paddle      */

  /* -------------------------------------------------------------------
     BOX SHADOWS (glow-oriented for dark theme)
     ------------------------------------------------------------------- */
  --shadow-subtle:          0 2px 8px  rgba(0, 229, 255, 0.10);
  --shadow-medium:          0 4px 16px rgba(0, 229, 255, 0.20);
  --shadow-strong:          0 8px 32px rgba(0, 229, 255, 0.35);

  /* -------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------- */
  --transition-fast:        150ms ease;
  --transition-normal:      300ms ease;
  --transition-slow:        600ms ease;

  /* -------------------------------------------------------------------
     Z-INDEX LAYERS
     ------------------------------------------------------------------- */
  --z-canvas:               0;
  --z-hud:                  100;
  --z-overlay:              200;
  --z-modal:                300;

  /* -------------------------------------------------------------------
     GAME-SPECIFIC ALIASES
     Maps semantic roles to palette tokens for quick theming.
     ------------------------------------------------------------------- */
  --color-background:       var(--color-neutral-900);
  --color-background-end:   var(--color-neutral-800);
  --color-text:             var(--color-neutral-50);
  --color-text-muted:       var(--color-neutral-100);
  --color-paddle:           var(--color-primary);
  --color-ball:             var(--color-neutral-50);
  --color-ball-glow:        var(--color-primary);
  --color-brick-normal:     #4fc3f7;   /* electric blue  — 9.5:1 */
  --color-brick-tough:      var(--color-warning);
  --color-brick-very-tough: #f06292;   /* hot pink — 6.2:1 */
  --color-powerup-wide:     var(--color-success);
  --color-powerup-multi:    var(--color-secondary);
  --color-powerup-life:     var(--color-error);
  --color-hud-bg:           rgba(10, 14, 39, 0.85);
  --color-overlay-backdrop:  rgba(0, 0, 0, 0.70);
}