/* ═══════════════════════════════════════════════════════════════
   VARIABLES — tokens de design, typographie, couleurs, rayons
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'Satoshi', 'Inter', sans-serif;

  /* Board colors — rich wood tones */
  --sq-light: #e8d5b0;
  --sq-dark: #8b6d4c;
  --sq-light-highlight: #f4e87c;
  --sq-dark-highlight: #c9b44a;
  --sq-light-move: rgba(100, 200, 100, 0.45);
  --sq-dark-move: rgba(80, 160, 80, 0.45);
  --sq-light-lastmove: #cdd26a88;
  --sq-dark-lastmove: #a4a72b88;
  --sq-check: rgba(255, 40, 40, 0.6);

  /* Dark theme */
  --color-bg: #0f0f13;
  --color-surface: #1a1a22;
  --color-surface-2: #222230;
  --color-border: #2d2d3a;
  --color-text: #e8e7e4;
  --color-text-muted: #8a8a96;
  --color-text-faint: #55556a;
  --color-primary: #4aa87c;
  --color-primary-hover: #3d9068;
  --color-primary-glow: rgba(74, 168, 124, 0.15);
  --color-accent: #d4a44a;
  --color-danger: #e05555;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
  --shadow-board: 0 8px 50px rgba(0,0,0,0.5), 0 0 100px rgba(74,168,124,0.08);

  --transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-med: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --board-size: min(62vh, 55vw, 480px);
  --sq-size: calc(var(--board-size) / 8);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(74,168,124,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(212,164,74,0.03) 0%, transparent 50%);
  line-height: 1.5;
  overflow-x: hidden;
}