/*
  TapNova PRO V17.1 — Design Tokens Foundation
  Phase 2 only: establishes a shared visual vocabulary without changing
  the existing gameplay, audio, chart, scoring, or per-page styling.
*/
:root {
  /* Semantic colors: current V16-compatible defaults */
  --tn-color-bg: var(--bg, #070910);
  --tn-color-surface: var(--panel, #111522);
  --tn-color-surface-2: var(--panel2, #151a28);
  --tn-color-border: var(--line, #252b3d);
  --tn-color-text: var(--text, #f5f6fb);
  --tn-color-text-muted: var(--muted, #aab1c5);
  --tn-color-accent: var(--accent, var(--a, #8b7cff));
  --tn-color-accent-2: var(--accent2, var(--b, #21d4fd));
  --tn-color-success: var(--good, #63e6be);
  --tn-color-warning: var(--warn, #ffd86b);
  --tn-color-danger: var(--danger, #ff6b6b);

  /* RGB channels for future alpha-safe theme composition */
  --tn-rgb-bg: 7 9 16;
  --tn-rgb-surface: 17 21 34;
  --tn-rgb-text: 245 246 251;
  --tn-rgb-accent: 139 124 255;
  --tn-rgb-accent-2: 33 212 253;

  /* Typography */
  --tn-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --tn-font-display: var(--tn-font-sans);
  --tn-font-weight-regular: 400;
  --tn-font-weight-medium: 600;
  --tn-font-weight-bold: 800;
  --tn-font-weight-black: 900;
  --tn-text-xs: 0.75rem;
  --tn-text-sm: 0.875rem;
  --tn-text-md: 1rem;
  --tn-text-lg: 1.125rem;
  --tn-text-xl: 1.5rem;
  --tn-text-2xl: 2rem;
  --tn-text-display: clamp(2.75rem, 7vw, 5.5rem);
  --tn-line-tight: 1.05;
  --tn-line-normal: 1.45;
  --tn-line-relaxed: 1.65;

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

  /* Radius system */
  --tn-radius-xs: 0.375rem;   /* 6px */
  --tn-radius-sm: 0.5rem;     /* 8px */
  --tn-radius-md: 0.75rem;    /* 12px */
  --tn-radius-lg: 1rem;       /* 16px */
  --tn-radius-xl: 1.25rem;    /* 20px */
  --tn-radius-2xl: 1.5rem;    /* 24px */
  --tn-radius-pill: 999px;
  --tn-radius-circle: 50%;

  /* Borders */
  --tn-border-width: 1px;
  --tn-border-subtle: var(--tn-border-width) solid color-mix(in srgb, var(--tn-color-border) 78%, transparent);
  --tn-border-default: var(--tn-border-width) solid var(--tn-color-border);
  --tn-border-active: var(--tn-border-width) solid color-mix(in srgb, var(--tn-color-accent) 72%, white 8%);

  /* Elevation: shadow = depth, glow = energy */
  --tn-shadow-xs: 0 4px 14px rgb(0 0 0 / 0.18);
  --tn-shadow-sm: 0 10px 28px rgb(0 0 0 / 0.24);
  --tn-shadow-md: 0 20px 54px rgb(0 0 0 / 0.32);
  --tn-shadow-lg: 0 30px 90px rgb(0 0 0 / 0.45);
  --tn-glow-accent-sm: 0 0 16px color-mix(in srgb, var(--tn-color-accent) 26%, transparent);
  --tn-glow-accent-md: 0 0 28px color-mix(in srgb, var(--tn-color-accent) 34%, transparent);
  --tn-glow-accent-2: 0 0 28px color-mix(in srgb, var(--tn-color-accent-2) 30%, transparent);

  /* Motion */
  --tn-duration-instant: 90ms;
  --tn-duration-fast: 140ms;
  --tn-duration-normal: 220ms;
  --tn-duration-slow: 360ms;
  --tn-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tn-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --tn-container-sm: 720px;
  --tn-container-md: 960px;
  --tn-container-lg: 1180px;
  --tn-container-xl: 1320px;
  --tn-control-height-sm: 36px;
  --tn-control-height-md: 44px;
  --tn-control-height-lg: 52px;

  /* Surface recipes for future migration */
  --tn-surface-solid: var(--tn-color-surface);
  --tn-surface-glass: rgb(var(--tn-rgb-surface) / 0.78);
  --tn-surface-glass-strong: rgb(var(--tn-rgb-surface) / 0.90);
  --tn-backdrop-blur: 16px;

  /* Gameplay-specific semantic tokens */
  --tn-game-note: #8df2ff;
  --tn-game-hold: #6de5ff;
  --tn-game-perfect: #ffffff;
  --tn-game-great: #9fdcff;
  --tn-game-good: #ffd86b;
  --tn-game-miss: #ff6b6b;
  --tn-game-lane-gap: 2px;
  --tn-game-receptor-size: 1;

  /* Z-index scale */
  --tn-z-background: 0;
  --tn-z-content: 10;
  --tn-z-sticky: 100;
  --tn-z-overlay: 400;
  --tn-z-modal: 500;
  --tn-z-toast: 600;

  /* Accessibility-ready switches; behavior comes in later phases */
  --tn-motion-factor: 1;
  --tn-flash-factor: 1;
  --tn-focus-background-dim: 0;
}