/* ============================================================
   Paddle — Design Tokens
   A cohesive, WCAG AA-compliant token set for the
   Paddle game UI. All color pairs verified against the
   dark background (#0A0A1A) at >= 4.5:1 contrast ratio.
   ============================================================ */

:root {

  /* ──────────────────────────────────────────
     1. COLOR PALETTE  (12 core tokens)
     ────────────────────────────────────────── */

  /* Primary — Player Cyan */
  --color-primary:           #00E5FF;   /* base  — contrast 12.79:1 */
  --color-primary-light:     #66EFFF;   /* light — contrast 14.38:1 */
  --color-primary-dark:      #00B8CC;   /* dark  — contrast  8.30:1 */

  /* Secondary — Computer Pink */
  --color-secondary:         #FF4081;   /* base  — contrast  5.90:1 */
  --color-secondary-light:   #FF79A8;   /* light — contrast  8.41:1 */
  --color-secondary-dark:    #E91E63;   /* dark  — contrast  4.51:1 */

  /* Neutral — Dark-theme grayscale */
  --color-neutral-900:       #0A0A1A;   /* background / court fill  */
  --color-neutral-500:       #6E6E8A;   /* decorative / disabled    */
  --color-neutral-100:       #EAEAF0;   /* body text — contrast 16.14:1 */

  /* Semantic */
  --color-success:           #00E676;   /* win   — contrast 11.78:1 */
  --color-warning:           #FFD740;   /* alert — contrast 14.09:1 */
  --color-error:             #FF5252;   /* lose  — contrast  6.16:1 */


  /* ──────────────────────────────────────────
     2. TYPE SCALE  (5 sizes, ~1.25 ratio)
     Base = 1rem (16px)
     ────────────────────────────────────────── */

  --font-size-xs:            0.64rem;   /* 10.24px — captions, fine print       */
  --font-size-sm:            0.8rem;    /* 12.80px — helper text, labels        */
  --font-size-md:            1rem;      /* 16.00px — body / base                */
  --font-size-lg:            1.25rem;   /* 20.00px — sub-headings, buttons      */
  --font-size-xl:            1.563rem;  /* 25.00px — headings, overlay titles   */

  --font-family-system:      system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-weight-normal:      400;
  --font-weight-bold:        700;
  --line-height-tight:       1.2;
  --line-height-normal:      1.5;
  --line-height-relaxed:     1.75;


  /* ──────────────────────────────────────────
     3. SPACING SCALE  (7 steps, 4px grid)
     ────────────────────────────────────────── */

  --space-1:                 0.25rem;   /*  4px  */
  --space-2:                 0.5rem;    /*  8px  */
  --space-3:                 0.75rem;   /* 12px  */
  --space-4:                 1rem;      /* 16px  */
  --space-5:                 1.5rem;    /* 24px  */
  --space-6:                 2rem;      /* 32px  */
  --space-7:                 3rem;      /* 48px  */


  /* ──────────────────────────────────────────
     4. BORDER RADII
     ────────────────────────────────────────── */

  --radius-sm:               4px;
  --radius-md:               8px;
  --radius-lg:               16px;
  --radius-full:             9999px;


  /* ──────────────────────────────────────────
     5. BOX SHADOWS
     Dual-layer shadows for realistic depth.
     Higher opacity than light themes — shadows
     must read on dark backgrounds.
     ────────────────────────────────────────── */

  --shadow-subtle:           0  1px  3px rgba(0, 0, 0, 0.40),
                             0  1px  2px rgba(0, 0, 0, 0.30);
  --shadow-medium:           0  4px  6px rgba(0, 0, 0, 0.50),
                             0  2px  4px rgba(0, 0, 0, 0.40);
  --shadow-strong:           0 10px 20px rgba(0, 0, 0, 0.60),
                             0  6px  6px rgba(0, 0, 0, 0.50);

  /* Color glow variants for interactive game elements */
  --shadow-glow-primary:     0 0 15px rgba(0, 229, 255, 0.40);
  --shadow-glow-secondary:   0 0 15px rgba(255, 64, 129, 0.40);


  /* ──────────────────────────────────────────
     6. TRANSITIONS
     ────────────────────────────────────────── */

  --transition-fast:         120ms ease-out;
  --transition-normal:       250ms ease-in-out;
  --transition-slow:         400ms ease-in-out;

  /* Named timing functions */
  --ease-out:                cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in-out:             cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-bounce:             cubic-bezier(0.34, 1.56, 0.64, 1.0);


  /* ──────────────────────────────────────────
     7. GAME-SPECIFIC TOKENS
     Carry forward from ARCHITECTURE.md §13
     for canvas rendering consistency.
     ────────────────────────────────────────── */

  --game-court-line:         rgba(255, 255, 255, 0.15);
  --game-court-wall:         rgba(255, 255, 255, 0.10);
  --game-ball-color:         #FFFFFF;
  --game-ball-glow:          rgba(255, 255, 255, 0.30);
  --game-overlay-bg:         rgba(10, 10, 26, 0.75);
  --game-text-secondary:     rgba(255, 255, 255, 0.60);
  --game-btn-bg:             rgba(255, 255, 255, 0.10);
  --game-btn-bg-hover:       rgba(255, 255, 255, 0.20);
}