/* ACTUARUS — tokens du système de design (charte design.pdf).
   Toute couleur, taille ou durée de l'interface vient d'ici : modifier la charte = modifier ce fichier. */

:root {
  /* Surfaces */
  --bg-app: #f7f8fa;
  --bg-surface: #ffffff;
  --bg-surface-2: #eef1f5;
  --bg-surface-3: #e4e8ee;
  --bg-overlay: rgba(15, 20, 32, 0.45);
  --bg-inverse: #121826;
  --fg-inverse: #f2f4f8;

  /* Texte */
  --fg-1: #151a26;
  --fg-2: #4a5468;
  --fg-3: #667186;
  --fg-4: #8d97a8;
  --fg-on-brand: #ffffff;

  /* Bordures */
  --border-1: #d6dce5;
  --border-2: #e4e8ee;
  --border-strong: #b8c1cf;
  --border-focus: #2856ad;

  /* Marque (navy) */
  --navy-50: #eef3fb;
  --navy-100: #dce6f6;
  --navy-500: #2856ad;
  --navy-600: #1c4290;
  --navy-700: #163474;
  --brand-navy: #162d68;

  /* Sémantique */
  --violet-50: #f1eefc;
  --violet-100: #e3dcfa;
  --violet-500: #6447c9;
  --violet-700: #4a32a3;
  --amber-50: #fff6e1;
  --amber-500: #d99a1c;
  --amber-700: #9b6708;
  --red-50: #fdecec;
  --red-100: #f8d4d4;
  --red-500: #cf3a3a;
  --red-700: #9b1f1f;
  --teal-50: #e4f6f3;
  --teal-500: #1f9d8b;
  --teal-700: #126e62;
  --slate-50: #f1f3f6;
  --slate-700: #4a5468;

  /* Rôles d'usage */
  --link: var(--navy-500);
  --btn-primary: var(--navy-500);
  --btn-primary-hover: var(--navy-600);
  --btn-primary-active: var(--navy-700);
  --wordmark: var(--brand-navy);
  --chip-active-bg: var(--brand-navy);
  --chip-active-fg: #ffffff;

  /* Typographie */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --text-amount: 22px;
  --text-amount-xl: 30px;
  --leading-tight: 1.2;
  --leading-normal: 1.55;
  --tracking-eyebrow: 0.09em;

  /* Espacements (base 4 px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Formes */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(21, 26, 38, 0.05);
  --shadow-2: 0 4px 16px rgba(21, 26, 38, 0.08);
  --shadow-3: 0 16px 48px rgba(21, 26, 38, 0.18);
  --shadow-focus: 0 0 0 3px rgba(40, 86, 173, 0.2);
  --shadow-focus-danger: 0 0 0 3px rgba(207, 58, 58, 0.2);

  /* Mise en page */
  --sidebar-width: 248px;
  --topbar-height: 60px;
  --content-max: 1200px;
  --content-narrow: 760px;
  --gutter: 40px;

  /* Mouvement */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  --z-sidebar: 30;
  --z-topbar: 20;
  --z-overlay: 50;
  --z-toast: 60;

  color-scheme: light;
}

/* Thème sombre : choisi explicitement, ou suivi du système si aucun choix. */
:root[data-theme="dark"] {
  --bg-app: #0c1018;
  --bg-surface: #141a26;
  --bg-surface-2: #1c2330;
  --bg-surface-3: #232b3a;
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --bg-inverse: #e9edf4;
  --fg-inverse: #121826;
  --fg-1: #eef1f5;
  --fg-2: #aeb7c6;
  --fg-3: #8a93a8;
  --fg-4: #646e82;
  --border-1: #2a3344;
  --border-2: #222a39;
  --border-strong: #3a455a;
  --border-focus: #5e84d6;
  --navy-50: #1a2942;
  --navy-100: #22355a;
  --navy-500: #3f6fcc;
  --navy-600: #5180d8;
  --navy-700: #c9d8f3;
  --violet-50: #221b3d;
  --violet-100: #2d2452;
  --violet-500: #9b86f0;
  --violet-700: #c4b7fa;
  --amber-50: #2c2008;
  --amber-700: #f2c879;
  --red-50: #2c1212;
  --red-100: #43191a;
  --red-700: #f09a9a;
  --teal-50: #07241f;
  --teal-500: #3cc2ad;
  --teal-700: #5fd0bf;
  --slate-50: #1c2330;
  --slate-700: #aeb7c6;
  --link: #9fbaf0;
  --btn-primary: #3563bd;
  --btn-primary-hover: #3f6fcc;
  --btn-primary-active: #2c55a6;
  --wordmark: var(--fg-1);
  --chip-active-bg: #c9d8f3;
  --chip-active-fg: #0c1018;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 3px rgba(95, 132, 214, 0.35);
  --shadow-focus-danger: 0 0 0 3px rgba(240, 154, 154, 0.3);
  color-scheme: dark;
}

@media (max-width: 1024px) {
  :root { --gutter: 24px; --text-3xl: 30px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --text-3xl: 26px; --text-2xl: 22px; --text-amount-xl: 26px; }
}