/* Aurewing — tokens partagés. Voir /DESIGN.md. */
:root {
  color-scheme: light;

  /* Couleurs */
  --e3-bg: #f7f7f8;
  --e3-surface: #fff;
  --e3-surface-subtle: #f2f2f3;
  --e3-text: #242424;
  --e3-muted: #6b6b6b;
  --e3-faint: #a1a1aa;
  --e3-border: rgba(24, 24, 27, .10);
  --e3-border-strong: rgba(24, 24, 27, .18);
  --e3-primary: #242424;
  --e3-primary-hover: #3f3f46;
  --e3-focus: #2563eb;
  --e3-success: #16803c;
  --e3-success-soft: #edf8f0;
  --e3-danger: #c73333;
  --e3-danger-soft: #fdf0f0;
  --e3-warning: #a16207;
  --e3-warning-soft: #fdf7e8;

  /* Typographie */
  --e3-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --e3-text-xs: 12px;
  --e3-text-sm: 14px;
  --e3-text-md: 16px;
  --e3-text-lg: 20px;
  --e3-text-xl: 28px;
  --e3-text-2xl: 36px;

  /* Espacement */
  --e3-space-1: 4px;
  --e3-space-2: 8px;
  --e3-space-3: 12px;
  --e3-space-4: 16px;
  --e3-space-5: 24px;
  --e3-space-6: 32px;
  --e3-space-7: 48px;
  --e3-space-8: 64px;

  /* Formes et contrôles */
  --e3-radius-sm: 4px;
  --e3-radius-md: 6px;
  --e3-radius-lg: 8px;
  --e3-radius-xl: 12px;
  --e3-control-sm: 36px;
  --e3-control-md: 40px;
  --e3-control-lg: 44px;

  /* Profondeur */
  --e3-shadow-surface: 0 1px 2px rgba(0, 0, 0, .04);
  --e3-shadow-overlay: 0 18px 50px rgba(0, 0, 0, .16);
  --e3-motion-fast: 120ms;
  --e3-motion-default: 180ms;
}

body.theme-dark,
[data-theme="dark"] {
  color-scheme: dark;
  --e3-bg: #0f1011;
  --e3-surface: #161718;
  --e3-surface-subtle: #1d1e20;
  --e3-text: #f4f4f5;
  --e3-muted: #a1a1aa;
  --e3-faint: #71717a;
  --e3-border: rgba(255, 255, 255, .08);
  --e3-border-strong: rgba(255, 255, 255, .15);
  --e3-primary: #f4f4f5;
  --e3-primary-hover: #d4d4d8;
  --e3-focus: #60a5fa;
  --e3-success: #55b875;
  --e3-success-soft: rgba(39, 166, 68, .12);
  --e3-danger: #ef7777;
  --e3-danger-soft: rgba(220, 38, 38, .12);
  --e3-warning: #d6a64d;
  --e3-warning-soft: rgba(217, 119, 6, .12);
  --e3-shadow-surface: 0 1px 2px rgba(0, 0, 0, .30);
  --e3-shadow-overlay: 0 18px 50px rgba(0, 0, 0, .48);
}

:focus-visible {
  outline: 2px solid var(--e3-focus);
  outline-offset: 2px;
}

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