/* =========================================================
   DESIGN TOKENS — « L'Établi numérique » (AdrianPCMaster)
   Couleurs exactes du logo : rouge #E00010 · anthracite #101818
   Thèmes : clair (défaut) · sombre (auto via prefers-color-scheme
   ou [data-theme]).
   ========================================================= */
:root{
  /* Marque */
  --brand-red:#E00010; --brand-red-hover:#B8000D; --brand-red-bright:#FF2A1A;
  --ink:#101818; --black:#000; --white:#fff;

  /* Espacements */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  /* Rayons */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  /* Typo */
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1); --dur:180ms;

  /* Statuts */
  --st-brouillon:#64748B; --st-encours:#2563EB; --st-att-client:#D9870B;
  --st-att-piece:#7C3AED; --st-termine:#15A36A; --st-cloture:#3F434B;

  /* ---- Thème CLAIR (défaut) ---- */
  --bg:#FFFFFF; --bg-sunken:#F3F5F5; --surface:#FFFFFF; --surface-2:#F8FAFA;
  --border:#E4E9E8; --border-strong:#D2DAD9;
  --text:#101818; --text-muted:#5B6664; --text-faint:#8B9593;
  --accent:var(--brand-red); --accent-hover:var(--brand-red-hover);
  --grid-line:rgba(16,24,24,.045);
  --shadow-sm:0 1px 2px rgba(16,24,24,.06),0 1px 3px rgba(16,24,24,.04);
  --shadow-md:0 4px 12px rgba(16,24,24,.08),0 2px 4px rgba(16,24,24,.05);
  --shadow-lg:0 18px 40px rgba(16,24,24,.14),0 6px 14px rgba(16,24,24,.08);
}

/* ---- Thème SOMBRE auto (si aucun choix explicite) ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){ color-scheme:dark;
    --bg:#0B0F0F; --bg-sunken:#070A0A; --surface:#101818; --surface-2:#162020;
    --border:#243030; --border-strong:#33403F;
    --text:#F4F7F6; --text-muted:#9DAAA8; --text-faint:#6E7B79;
    --accent:var(--brand-red-bright); --accent-hover:var(--brand-red);
    --grid-line:rgba(255,255,255,.04);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow-md:0 6px 16px rgba(0,0,0,.45);
    --shadow-lg:0 22px 50px rgba(0,0,0,.6),0 8px 18px rgba(0,0,0,.45);
  }
  :root:not([data-theme]) .logo-plate{background:#F5F7F7;box-shadow:var(--shadow-sm)}
}

/* ---- Thème SOMBRE explicite ---- */
[data-theme="dark"]{ color-scheme:dark;
  --bg:#0B0F0F; --bg-sunken:#070A0A; --surface:#101818; --surface-2:#162020;
  --border:#243030; --border-strong:#33403F;
  --text:#F4F7F6; --text-muted:#9DAAA8; --text-faint:#6E7B79;
  --accent:var(--brand-red-bright); --accent-hover:var(--brand-red);
  --grid-line:rgba(255,255,255,.04);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 6px 16px rgba(0,0,0,.45);
  --shadow-lg:0 22px 50px rgba(0,0,0,.6),0 8px 18px rgba(0,0,0,.45);
}
[data-theme="dark"] .logo-plate{background:#F5F7F7;box-shadow:var(--shadow-sm)}