/* Tokens du design system A, sous les noms de l'application.
 *
 * Valeurs : docs/design/assets/design-tokens-a.css (--a-*), qui est la cible.
 * Noms : ceux de crates/web/style/main.css, pour qu'un copier-coller suffise.
 * Les tokens absents de l'app (--selection, --control-border, --space-*…)
 * viennent de A.
 *
 * Thème : `data-theme` sur <html> force clair ou sombre ; sans attribut,
 * `prefers-color-scheme` décide (même mécanisme que crates/web/src/theme.rs). */

:root {
  color-scheme: light;
  /* Surfaces */
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-raised: #ffffff;
  --surface-subtle: #f8fafc;
  --border: #dce2eb;
  --control-border: #7a8799;
  /* Texte */
  --text: #101828;
  --text-muted: #526078;
  /* Action et sélection */
  --accent: #3564c4;
  --accent-hover: #294fa0;
  --accent-text: #ffffff;
  --selection: #ebf2ff;
  --info-border: #b9d0ff;
  /* Sémantique */
  --success: #087653;
  --warning: #8a5300;
  --danger: #b42336;
  --danger-hover: #8f1b2b;
  --info: #3564c4;
  --success-soft: #e7f6f0;
  --warning-soft: #fdf3e1;
  --danger-soft: #fdecee;
  --focus: #3564c4;
  /* Élévation */
  --shadow: 0 8px 24px rgb(16 24 40 / 12%);
  --shadow-overlay: 0 8px 24px rgb(16 24 40 / 12%);
  --backdrop: rgb(15 18 28 / 45%);
  /* Forme */
  --radius: 8px;
  --radius-small: 6px;
  --control-height: 44px;
  /* Typographie */
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-body: 16px;
  --text-section: 18px;
  --text-page: 30px;
  --text-ticket: 36px;
  /* Espacements */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;
  --space-12: 48px;
  /* Mise en page */
  --header-height: 70px;
  --panel-width: clamp(760px, 57vw, 1040px);
  /* Mouvement */
  --fast: 120ms;
  --enter: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #151a23;
    --surface: #1d2430;
    --surface-2: #252e3c;
    --surface-raised: #1d2430;
    --surface-subtle: #252e3c;
    --border: #3b475c;
    --control-border: #8795ac;
    --text: #f0f3f9;
    --text-muted: #b2bed2;
    --accent: #9db9ff;
    --accent-hover: #bcd0ff;
    --accent-text: #12213d;
    --selection: #253957;
    --info-border: #577cad;
    --success: #72d5af;
    --warning: #f2c36b;
    --danger: #ff9aab;
    --danger-hover: #ffc2cc;
    --info: #9db9ff;
    --success-soft: #173a31;
    --warning-soft: #3d3120;
    --danger-soft: #45222b;
    --focus: #9db9ff;
    --shadow: 0 8px 24px rgb(0 0 0 / 40%);
    --shadow-overlay: 0 8px 24px rgb(0 0 0 / 40%);
    --backdrop: rgb(0 0 0 / 60%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151a23;
  --surface: #1d2430;
  --surface-2: #252e3c;
  --surface-raised: #1d2430;
  --surface-subtle: #252e3c;
  --border: #3b475c;
  --control-border: #8795ac;
  --text: #f0f3f9;
  --text-muted: #b2bed2;
  --accent: #9db9ff;
  --accent-hover: #bcd0ff;
  --accent-text: #12213d;
  --selection: #253957;
  --info-border: #577cad;
  --success: #72d5af;
  --warning: #f2c36b;
  --danger: #ff9aab;
  --danger-hover: #ffc2cc;
  --info: #9db9ff;
  --success-soft: #173a31;
  --warning-soft: #3d3120;
  --danger-soft: #45222b;
  --focus: #9db9ff;
  --shadow: 0 8px 24px rgb(0 0 0 / 40%);
  --shadow-overlay: 0 8px 24px rgb(0 0 0 / 40%);
  --backdrop: rgb(0 0 0 / 60%);
}

@media (max-width: 1279px) {
  :root { --header-height: 64px; --panel-width: 100vw; }
}

@media (max-width: 860px) {
  :root { --header-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0ms; --enter: 0ms; }
}