/* Design tokens Alterium WPM : palette sobre, police système, clair et sombre.
   data-theme="auto" suit le système ; "light" et "dark" forcent le thème (bascule dans app.js). */
:root,
[data-theme="light"] {
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-muted: #eef0f3;
  --color-border: #d5d9e0;
  --color-text: #1c2430;
  --color-text-muted: #556070;
  --color-primary: #1f5fae;
  --color-primary-hover: #184c8c;
  --color-on-primary: #ffffff;
  --color-focus: #f0a400;
  --color-success-bg: #e3f4ea;
  --color-success-text: #1d6b3b;
  --color-error-bg: #fbe7e7;
  --color-error-text: #a12626;
  --color-info-bg: #e5eefa;
  --color-info-text: #1f4f8a;
  --color-warning-bg: #fdf3dc;
  --color-warning-text: #7a5300;

  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --line-height: 1.5;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-card: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 10%);
  --sidebar-width: 15rem;
  --content-max: 72rem;
  --touch-target: 44px;
  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg: #11161d;
  --color-surface: #1a212b;
  --color-surface-muted: #232c38;
  --color-border: #344052;
  --color-text: #e6eaf0;
  --color-text-muted: #a3adbb;
  --color-primary: #6aa5f0;
  --color-primary-hover: #8dbaf4;
  --color-on-primary: #0b1520;
  --color-focus: #ffc23d;
  --color-success-bg: #163222;
  --color-success-text: #8fdcaa;
  --color-error-bg: #3a1a1a;
  --color-error-text: #f3a3a3;
  --color-info-bg: #172a43;
  --color-info-text: #a9c8f2;
  --color-warning-bg: #3a2c0c;
  --color-warning-text: #f1cf7d;
  --shadow-card: 0 1px 3px rgb(0 0 0 / 40%);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --color-bg: #11161d;
    --color-surface: #1a212b;
    --color-surface-muted: #232c38;
    --color-border: #344052;
    --color-text: #e6eaf0;
    --color-text-muted: #a3adbb;
    --color-primary: #6aa5f0;
    --color-primary-hover: #8dbaf4;
    --color-on-primary: #0b1520;
    --color-focus: #ffc23d;
    --color-success-bg: #163222;
    --color-success-text: #8fdcaa;
    --color-error-bg: #3a1a1a;
    --color-error-text: #f3a3a3;
    --color-info-bg: #172a43;
    --color-info-text: #a9c8f2;
    --color-warning-bg: #3a2c0c;
    --color-warning-text: #f1cf7d;
    --shadow-card: 0 1px 3px rgb(0 0 0 / 40%);
    color-scheme: dark;
  }
}