/* ============================================
   TypeBlocks - UI Styles
   Identity: "the channel strip" — the menu is the band's
   mixing desk. Mono type is the game voice (keyboards),
   the EQ strip under the wordmark is the signature, and
   interactive cards light a channel rail on hover/focus.
   All color routes through tokens; body[data-theme]
   overrides them per theme.
   ============================================ */

/* U0b — the type we name is now the type we ship. Before this, these
   families were requested but never delivered: every player fell through to
   an OS face, so the falling words themselves looked different on every
   machine. Self-hosted (a CDN would break the offline PWA and add two
   origins), subset + variable — one file per family covers 400/600/700.
   Regenerate with tools/font-subset/subset.py; both faces are SIL OFL and
   attributed in README.md.

   Mono carries the falling words, and that is architecture, not taste:
   drawBlock paints each word in up to four fillText pieces positioned by
   measureText, so fixed advance widths are what keep the glyphs from
   drifting mid-word. A proportional face here would break "glyph positions
   never move while typing" at the font level. See UX-DISCUSSION entry 6. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-mono-latin-var.woff2?v=208') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin-var.woff2?v=208') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Design Tokens */
:root {
  /* Colors */
  --color-primary: #00d9ff;
  --color-primary-dark: #0099cc;
  --color-primary-glow: rgba(0, 217, 255, 0.3);
  /* Second note of the theme's chord: gradient partner for the
     wordmark, EQ strip, rails, and intensity meter */
  --color-accent-2: #00ff88;
  --color-success: #00ff88;
  --color-success-glow: rgba(0, 255, 136, 0.3);
  --color-error: #ff6b6b;
  --color-error-glow: rgba(255, 107, 107, 0.3);
  --color-warning: #ffcc00;
  --color-warning-glow: rgba(255, 204, 0, 0.3);

  /* Surfaces */
  --color-bg: #0a0a14;
  --color-bg-gradient: linear-gradient(145deg, #0a0a14 0%, #12121f 50%, #0a0a14 100%);
  --color-surface: #16162a;
  --color-surface-elevated: #1e1e38;
  --color-surface-hover: #252548;

  /* Text */
  --color-text: #f0f0f5;
  --color-text-secondary: #a0a0b0;
  --color-text-muted: #949aae; /* >= 4.5:1 on every theme's elevated surface */

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(0, 217, 255, 0.3);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px var(--color-primary-glow);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Fira Code', monospace;
  /* Display voice = the game's voice: wordmark, PAUSED, GAME OVER, scoreboards */
  --font-display: var(--font-mono);

  /* Transitions */
  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.2s ease-out;
  --transition-slow: 0.3s ease-out;
}