/* ── Design tokens — Suivi des labels LTL ─────────────────────────────────
   Semantic tokens only: components never reference raw hex values.
   Light is the default; dark applies via [data-theme=dark] (manual toggle)
   or prefers-color-scheme when no manual choice was stored. */

:root {
  /* type scale (rem) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8438rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.3125rem;
  --fs-2xl: 1.625rem;

  /* spacing (4 px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;

  /* radii */
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-full: 999px;

  /* elevation + focus */
  --shadow-1:
    0 1px 2px rgba(23, 32, 60, 0.06), 0 2px 8px rgba(23, 32, 60, 0.05);
  --shadow-2:
    0 4px 14px rgba(23, 32, 60, 0.1), 0 12px 40px rgba(23, 32, 60, 0.12);
  --focus: 0 0 0 3px var(--accent-soft);
  --ease: 160ms cubic-bezier(0.3, 0.7, 0.4, 1);

  /* semantic colors — light */
  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface-2: #eceff5;
  --border: #dfe4ee;
  --text: #1c2433;
  --text-muted: #62708b;
  --accent: #3352b8;
  --accent-soft: #dbe2f8;
  --ok: #178a4c;
  --ok-soft: #ddf2e5;
  --warn: #b26e00;
  --warn-soft: #f9edd6;
  --danger: #c93b3b;
  --danger-soft: #f9e2e2;

  /* per-label hues (referenced as var(--label-hue) inside label scopes) */
  --hue-ses: #1f8a4c;
  --hue-ses-soft: #dcf1e4;
  --hue-fll: #5157c9;
  --hue-fll-soft: #e2e4f9;

  color-scheme: light dark;
}

/* dark values, shared by the two activation paths below */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12151c;
    --surface: #1a1f2a;
    --surface-2: #232a38;
    --border: #2e3648;
    --text: #e7ebf4;
    --text-muted: #94a0ba;
    --accent: #8ba3f4;
    --accent-soft: #2c3a63;
    --ok: #45c581;
    --ok-soft: #173524;
    --warn: #e3a44b;
    --warn-soft: #3c2f16;
    --danger: #ea7070;
    --danger-soft: #46201f;
    --hue-ses: #43bd7d;
    --hue-ses-soft: #173425;
    --hue-fll: #8e93ec;
    --hue-fll-soft: #272a52;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45), 0 12px 40px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12151c;
  --surface: #1a1f2a;
  --surface-2: #232a38;
  --border: #2e3648;
  --text: #e7ebf4;
  --text-muted: #94a0ba;
  --accent: #8ba3f4;
  --accent-soft: #2c3a63;
  --ok: #45c581;
  --ok-soft: #173524;
  --warn: #e3a44b;
  --warn-soft: #3c2f16;
  --danger: #ea7070;
  --danger-soft: #46201f;
  --hue-ses: #43bd7d;
  --hue-ses-soft: #173425;
  --hue-fll: #8e93ec;
  --hue-fll-soft: #272a52;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45), 0 12px 40px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}