/* DÉBATONS V4 — design tokens. Dark by default. <html data-ambiance="rose|bleu|or"> swaps accents only.
   Fonts: Unbounded 700/800 (display) + Atkinson Hyperlegible 400/700 (text). See docs/DESIGN.md */

:root {
  color-scheme: dark;

  /* Raw palette */
  --night-950: #12081b;
  --night-900: #1a0c26;
  --night-800: #241333;
  --night-700: #301c42;
  --night-600: #3e2754;
  --night-500: #5a3f73;
  --mist-300: #cdbcd9;
  --mist-100: #fff4fa;
  --paper: #fbefe6; /* game card face */
  --paper-2: #f2dfd2;
  --ink: #241030; /* text on paper and on accents */
  --ink-soft: #5b4466;

  /* Semantic surfaces & text */
  --color-bg: var(--night-900);
  --color-bg-deep: var(--night-950);
  --color-surface: var(--night-800);
  --color-surface-2: var(--night-700);
  --color-surface-3: var(--night-600);
  --color-border: var(--night-500);
  --color-border-strong: #7d6196; /* >= 3:1 on bg: input & chip outlines */
  --color-text: var(--mist-100);
  --color-text-muted: var(--mist-300);
  --color-text-on-paper: var(--ink);
  --color-text-on-paper-muted: var(--ink-soft);

  /* Status */
  --color-success: #5ee6a8;
  --color-success-bg: #133a2e;
  --color-error: #ff8a8a;
  --color-error-bg: #48182a;
  --color-error-ink: #3a0a12; /* text on --color-error fills (danger button) */
  --color-warning: #ffcc66;
  --color-warning-bg: #45311a;
  --color-focus: #ffffff;

  /* Game modes */
  --mode-couple: #ff7aa8;
  --mode-hot: #ff6a4d;
  --mode-amis: #ffbd4a;
  --mode-double: #a594ff;

  /* Ambiance accents */
  --accent: #ff4d8d; /* main accent (fills, rings, active marks) */
  --accent-2: #ffa94d; /* gradient end */
  --accent-text: #ff8fb6; /* accent used as text on dark surfaces */
  --accent-ink: #2a0d1f; /* text on accent fills */
  --accent-soft: rgb(255 77 141 / 0.16);
  --accent-glow: rgb(255 77 141 / 0.35);
  --accent-gradient: linear-gradient(105deg, var(--accent) 0%, var(--accent-2) 100%);
  --bg-glow-1: rgb(160 40 140 / 0.38);
  --bg-glow-2: rgb(255 120 80 / 0.12);

  /* Typography */
  --font-display: "Unbounded", "Arial Black", "Segoe UI Black", system-ui, sans-serif;
  --font-text: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --weight-regular: 400;
  --weight-bold: 700;
  --text-xs: 0.8125rem; /* 13 — legal, counters */
  --text-sm: 0.9375rem; /* 15 — help, meta */
  --text-md: 1.0625rem; /* 17 — body, buttons */
  --text-lg: 1.25rem; /* 20 — section titles */
  --text-xl: 1.5rem; /* 24 */
  --text-2xl: 1.875rem; /* 30 */
  --text-3xl: 2.375rem; /* 38 — room code */
  --text-card: clamp(1.5rem, 1.05rem + 2.2vw, 1.875rem); /* 24–30: biggest on E6 */
  --text-card-long: clamp(1.3125rem, 1rem + 1.6vw, 1.5rem); /* 21–24: text > 140 chars */
  --text-turn: clamp(1.25rem, 0.95rem + 1.6vw, 1.5rem); /* 20–24 display: 2nd on E6 */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.5;
  --tracking-display: -0.01em;
  --tracking-code: 0.18em;

  /* Spacing: base 4 px (space-N = N × 4 px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --gutter: var(--space-4);
  --content-max: 560px;
  --target-min: 48px;
  --target-primary: 56px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px; /* buttons, fields */
  --radius-lg: 20px; /* panels, sheets */
  --radius-card: 28px; /* the game card only */
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgb(8 2 14 / 0.5);
  --shadow-md: 0 8px 24px rgb(8 2 14 / 0.55);
  --shadow-lg: 0 18px 48px rgb(8 2 14 / 0.7);
  --shadow-card: 0 2px 0 var(--paper-2), 0 22px 50px -12px rgb(8 2 14 / 0.85), 0 0 60px -20px var(--accent-glow);
  --shadow-primary: 0 8px 24px -8px var(--accent-glow);

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-deal: 420ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Layers */
  --z-base: 0;
  --z-sticky: 10;
  --z-banner: 20;
  --z-sheet: 40;
  --z-dialog: 50;
  --z-toast: 60;
}

/* Ambiances */
[data-ambiance="bleu"] {
  --accent: #3fc6ff;
  --accent-2: #8f7dff;
  --accent-text: #7fd9ff;
  --accent-ink: #0b1430;
  --accent-soft: rgb(63 198 255 / 0.15);
  --accent-glow: rgb(63 198 255 / 0.32);
  --bg-glow-1: rgb(60 70 200 / 0.40);
  --bg-glow-2: rgb(63 198 255 / 0.10);
}

[data-ambiance="or"] {
  --accent: #ffbf3c;
  --accent-2: #ffe08a;
  --accent-text: #ffd27a;
  --accent-ink: #2b1a05;
  --accent-soft: rgb(255 191 60 / 0.15);
  --accent-glow: rgb(255 191 60 / 0.30);
  --bg-glow-1: rgb(150 90 30 / 0.35);
  --bg-glow-2: rgb(255 191 60 / 0.08);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-deal: 0ms;
  }
}