/* ══════════════════════════════════════════════
   DATAPUZZLE — THEME TOKENS
   theme.css
   Gère les variables dark/light/auto
══════════════════════════════════════════════ */

:root {
  --bg:       #0a0a0f;
  --surface:  #13131a;
  --surface2: #1c1c28;
  --surface3: #222230;
  --border:   #2a2a3a;
  --accent:   #6c63ff;
  --accent2:  #ff6584;
  --accent3:  #43e97b;
  --text:     #e8e8f0;
  --muted:    #6b6b80;
  --shadow:   rgba(0,0,0,.4);

  --font-display: 'Syne', sans-serif;
  --font-mono:    'DM Mono', monospace;
  --font-body:    'DM Sans', sans-serif;
}

[data-theme="light"] {
  --bg:       #f7f7f9;
  --surface:  #ffffff;
  --surface2: #f0f0f5;
  --surface3: #e8e8f0;
  --border:   #e0e0ea;
  --text:     #0f0f1a;
  --muted:    #7a7a90;
  --shadow:   rgba(0,0,0,.08);
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg:       #f7f7f9;
    --surface:  #ffffff;
    --surface2: #f0f0f5;
    --surface3: #e8e8f0;
    --border:   #e0e0ea;
    --text:     #0f0f1a;
    --muted:    #7a7a90;
    --shadow:   rgba(0,0,0,.08);
  }
}