:root {
  /* ── Brand ── */
  --color-primary-light: #F5D88C;
  --color-primary: #E2B45A;
  --color-primary-dark: #C49640;

  /* ── Background ── */
  --color-secondary-light: #16213E;
  --color-secondary: #1A1A2E;
  --color-secondary-dark: #0F0F1E;

  /* ── Text ── */
  --color-neutral-light: #F0F0F0;
  --color-neutral: #A0A0B0;
  --color-neutral-dark: #6B6B7B;

  /* ── Status ── */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* ── Board ── */
  --board-light: #F5DEB3;
  --board-dark: #8B6914;

  /* ── Pieces ── */
  --piece-white: #F0F0F0;
  --piece-black: #1E1E1E;

  /* ── Highlights ── */
  --highlight-selected: rgba(250, 204, 21, 0.7);
  --highlight-valid: rgba(34, 197, 94, 0.85);
  --highlight-last: rgba(226, 180, 90, 0.18);
  --highlight-check: rgba(239, 68, 68, 0.6);
  --highlight-hint: rgba(59, 130, 246, 0.6);

  /* ── Typography ── */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2rem;
  --font-weight-normal: 400;
  --font-weight-semi: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;

  /* ── Spacing (4px grid) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* ── Radii ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 50%;

  /* ── Shadows ── */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-strong: 0 4px 12px rgba(0, 0, 0, 0.6);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease-out;
  --transition-slow: 500ms ease-in-out;

  /* ── Board sizing ── */
  --square-size: clamp(44px, min(11vw, 11vh), 70px);
}