/* Design tokens — the single source for colour, type, spacing and radius. */
:root {
  color-scheme: dark;
  --bg: #0b0c0e;
  --bg-2: #0f1113;
  --surface: #141619;
  --surface-2: #1a1d21;
  --surface-3: #22252a;
  --line: #24272c;
  --line-2: #30343a;
  --text: #ece8e1;
  --text-2: #b5b2ab;
  --muted: #80838b;

  --red: #ff4655;
  --red-2: #b9434d;
  --red-3: #6a2d33;
  --red-dim: rgba(255, 70, 85, 0.12);
  --orange: #ff8f4a;
  --orange-dim: rgba(255, 143, 74, 0.12);
  --yellow: #e8c547;
  --win: #3fcf8e;
  --win-dim: rgba(63, 207, 142, 0.12);
  --loss: #ff5a67;
  --loss-dim: rgba(255, 90, 103, 0.12);

  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  /* Surface textures (512px tiles, all luminance < 45/255, so text contrast holds).
     Rules: grain = default page background; diagonals = behind Live Match maps only;
     grid = sparingly in Statistics/Training. Never over lineup videos or map markers. */
  --tex-grain: url('../assets/textures/charcoal-grain.png');
  --tex-diagonals: url('../assets/textures/tactical-diagonals.png');
  --tex-grid: url('../assets/textures/blueprint-grid.png');
  --tex-size: 512px;

  --side-w: 236px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}