/* Jetons de design « Or et nuit ». Sombre par défaut ; clair ou automatique au choix.
   Les couleurs sont contrôlées par tests/test_front_design.py (contraste AA dans les deux thèmes). */

:root {
  --bg: #0b0d12;
  --surface: #13161e;
  --surface-2: #1b1f2a;
  --line: #272c3a;
  --text: #eeebe3;
  --muted: #9ba0ae;
  --accent: #e4b552;
  --accent-text: #1a1305;
  --gain: #4cd08a;
  --loss: #ff7b70;
  --warn: #f2b84b;

  --accent-soft: rgba(228, 181, 82, 0.12);
  --gain-soft: rgba(76, 208, 138, 0.12);
  --loss-soft: rgba(255, 123, 112, 0.12);
  --glow: radial-gradient(1200px 600px at 85% -10%, rgba(228, 181, 82, 0.10), transparent 60%);

  --font-title: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --space: 16px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 280ms;
  --toast-life: 4.5s;
  --dur-roll: 900ms;
  --dur-draw: 1200ms;

  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f6f3ea;
  --surface: #ffffff;
  --surface-2: #f0ebdd;
  --line: #e2dac7;
  --text: #1a1c23;
  --muted: #5c606e;
  --accent: #8a6410;
  --accent-text: #ffffff;
  --gain: #17774a;
  --loss: #b4261d;
  --warn: #855600;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
  --bg: #f6f3ea;
  --surface: #ffffff;
  --surface-2: #f0ebdd;
  --line: #e2dac7;
  --text: #1a1c23;
  --muted: #5c606e;
  --accent: #8a6410;
  --accent-text: #ffffff;
  --gain: #17774a;
  --loss: #b4261d;
  --warn: #855600;
  }
}

:root[data-theme="light"],
:root[data-theme="auto"] {
  color-scheme: light dark;
}

:root[data-theme="light"] {
  --accent-soft: rgba(138, 100, 16, 0.10);
  --gain-soft: rgba(23, 119, 74, 0.10);
  --loss-soft: rgba(180, 38, 29, 0.10);
  --glow: radial-gradient(1200px 600px at 85% -10%, rgba(138, 100, 16, 0.08), transparent 60%);
  --shadow: 0 1px 2px rgba(26, 28, 35, 0.04), 0 12px 32px -16px rgba(26, 28, 35, 0.18);
}