/* Design tokens - implementation-spec.md §4.1. Pokemon palette (design.md §5).
   Trade dress: colors only; no logo/wordmark/energy-symbol copies. */
:root {
  /* Brand core */
  --brand-yellow: #FFCB05;
  --brand-blue: #2A75BB;
  --brand-blue-dark: #003A70;
  --accent-red: #EE1515;

  /* Energy-type colors (type badges, filters, functional accents) */
  --type-fire: #EE8130;
  --type-water: #6390F0;
  --type-grass: #7AC74C;
  --type-lightning: #F7D02C;
  --type-psychic: #F95587;
  --type-fighting: #C22E28;
  --type-darkness: #5A5366;
  --type-metal: #B7B7CE;
  --type-dragon: #6F35FC;
  --type-fairy: #D685AD;
  --type-colorless: #C7C4B8;

  /* Surfaces (dark, tuned to the full-art background + scrim) */
  --bg: #0A0E1A;
  --surface: #141A2B;
  --surface-2: #1E2740;
  --text: #F5F7FF;
  --text-dim: #AEB6D0;
  --border: rgba(255, 255, 255, .08);
  --bg-scrim: linear-gradient(180deg, rgba(6, 10, 24, .72), rgba(6, 10, 24, .88));

  /* Scale */
  --space: 4px; /* 4-8-12-16-24-32-48-64 */
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, .45);

  /* z-layers */
  --z-bg: 0;
  --z-content: 10;
  --z-bars: 100;
  --z-overlay: 1000;

  /* Type scale (px): 12/14/16/20/26/34/44 */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 34px;
  --fs-3xl: 44px;
}