/* ============================================================================
   GALAXY DESIGN SYSTEM — tokens
   Direction : « Braun ops deck » (Dieter Rams) — fonctionnel, calme, honnête,
   un seul accent signal confiant sur des neutres chauds. Dark-first + light.
   Règle d'or : les apps IMPORTENT ce fichier et n'écrivent JAMAIS de valeur en dur.
   Conçu par Rams. Tout token nouveau réutilisable remonte ici.
   ============================================================================ */

:root {
  /* — Typographie (fontes libres, à SELF-HOSTER pour la vie privée — cf README) — */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* échelle modulaire (ratio 1.25, base 16px) */
  --text-xs:  0.75rem;   --text-sm:  0.875rem; --text-base: 1rem;
  --text-lg:  1.25rem;   --text-xl:  1.5rem;   --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;  --text-4xl: 3.052rem;
  --leading-tight: 1.15; --leading-normal: 1.5; --leading-relaxed: 1.7;
  --weight-regular: 400; --weight-medium: 500; --weight-bold: 700;
  --tracking-tight: -0.02em; --tracking-wide: 0.04em;

  /* — Espacement (base 4px) — */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-12: 4.5rem; --space-16: 6rem;

  /* — Rayons / ombres / traits — */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-full: 999px;
  --border: 1px solid var(--c-border);
  --shadow-1: 0 1px 2px rgba(0,0,0,.30);
  --shadow-2: 0 4px 16px rgba(0,0,0,.35);
  --shadow-3: 0 16px 48px rgba(0,0,0,.45);

  /* — Motion (honnête, discret) — */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms;

  /* — Couleurs : DARK (défaut — c'est un poste d'ops, on s'y use les yeux) — */
  --c-bg:        #17160F;  /* warm charcoal, pas du noir pur (honnête) */
  --c-surface:   #201E16;
  --c-surface-2: #2A2820;
  --c-elevated:  #322F26;
  --c-border:    #3A372C;
  --c-border-strong: #4D493B;

  --c-text:      #F3F0E6;  /* warm off-white */
  --c-text-muted:#B8B3A2;
  --c-text-subtle:#85806F;

  /* accent signal (Braun) — un seul, confiant */
  --c-accent:        #E5573A;
  --c-accent-strong: #C8462C;
  --c-accent-soft:   #2E211B;  /* tint sur fond sombre */
  --c-on-accent:     #FFFFFF;

  /* accent PAR-AGENT (chaque agent l'override : Warren=vert, Harvey=navy…) */
  --c-agent: var(--c-accent);

  /* sémantique (mutée, honnête — pas criard) */
  --c-success: #6FA45C; --c-success-soft: #1E2417;
  --c-danger:  #D85C4E; --c-danger-soft:  #2A1A18;
  --c-warning: #D9A441; --c-warning-soft: #2A2114;
  --c-info:    #6A9BCC; --c-info-soft:    #182230;

  --focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-agent);
  --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500;
}

/* — LIGHT (toggle explicite [data-theme="light"]) — */
:root[data-theme="light"] {
  --c-bg:        #FAF9F5;
  --c-surface:   #FFFFFF;
  --c-surface-2: #F1EFE7;
  --c-elevated:  #FFFFFF;
  --c-border:    #E2DFD3;
  --c-border-strong: #CFCBBC;
  --c-text:      #1B1A14;
  --c-text-muted:#5E5A4D;
  --c-text-subtle:#8A8675;
  --c-accent-soft: #FBE9E3;
  --shadow-1: 0 1px 2px rgba(20,18,12,.06);
  --shadow-2: 0 4px 16px rgba(20,18,12,.10);
  --shadow-3: 0 16px 48px rgba(20,18,12,.16);
}

/* — Accessibilité motion (non-négociable) — */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --ease-spring: var(--ease-out); }
}

/* — Reset minimal + base honnête — */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: var(--weight-bold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); }
code, .mono, [data-numeric] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }