/* Charte graphique Le Livre Vert */

:root {
  --llv-bleu: #266081;
  --llv-vert: #CFD14A;
  --llv-gris: #454545;

  /* Override Shoelace primary → bleu charte */
  --sl-color-primary-50:  #e8f3f7;
  --sl-color-primary-100: #c5dfe9;
  --sl-color-primary-200: #9fcbdb;
  --sl-color-primary-300: #78b4cb;
  --sl-color-primary-400: #57a0bb;
  --sl-color-primary-500: #357ea0;
  --sl-color-primary-600: #266081;
  --sl-color-primary-700: #1d4f6a;
  --sl-color-primary-800: #143d53;
  --sl-color-primary-900: #0b2c3c;
  --sl-color-primary-950: #061620;

  /* Typographie charte */
  --sl-font-sans: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;

  /* Variante hover vert */
  --llv-vert-hover: #b8ba3e;

  /* États fonctionnels */
  --llv-success: #38a169;
  --llv-success-hover: #2f855a;
  --llv-error: #e53e3e;
  --llv-warning: #dd6b20;
}

:root[data-theme="dark"] {
  --llv-bg: #1a1a2e;
  --llv-bg-surface: #242438;
  --llv-bg-nav: #242438;
  /* Surface "carte flottante" (cards, chips, faq, cta-band interne). Legerement
     plus clair que bg-surface pour maintenir un contraste "elevated" en dark.
     Utilise dans les designs WMS via `var(--llv-bg-card, #ffffff)`. */
  --llv-bg-card: #2e2e45;
  /* Surface "accent" (callouts, eyebrows, chips info). Ton bleu-nuit plus
     saturé en dark pour rester distinguable des surfaces neutres. */
  --llv-bg-accent: #2a3548;
  --llv-text: #e0e0e0;
  --llv-text-muted: #a0a0b0;
  --llv-border: #3a3a50;

  /* Shoelace overrides for dark mode */
  --sl-panel-background-color: #242438;
  --sl-panel-border-color: #3a3a50;
  --sl-color-neutral-0: #1a1a2e;
  --sl-color-neutral-50: #242438;
  --sl-color-neutral-100: #2e2e45;
  --sl-color-neutral-200: #3a3a50;
  --sl-color-neutral-300: #4a4a60;
  --sl-color-neutral-400: #6a6a80;
  --sl-color-neutral-500: #8a8a9a;
  --sl-color-neutral-600: #a0a0b0;
  --sl-color-neutral-700: #c0c0cc;
  --sl-color-neutral-800: #d0d0da;
  --sl-color-neutral-900: #e0e0e0;
  --sl-color-neutral-950: #f0f0f0;
  --sl-color-neutral-1000: #ffffff;
  --sl-input-background-color: #2e2e45;
  --sl-input-border-color: #3a3a50;
  --sl-input-color: #e0e0e0;
  --sl-input-placeholder-color: #6a6a80;
  --sl-overlay-background-color: rgba(0, 0, 0, 0.6);
  --llv-text-accent: var(--llv-vert);

  /* Shoelace spinner — utilise le vert charte en sombre */
  --sl-color-primary-600: var(--llv-vert);
}

:root:not([data-theme="dark"]) {
  --llv-text-accent: var(--llv-bleu);
  --llv-bg: #ffffff;
  --llv-bg-surface: #f7fafc;
  --llv-bg-nav: #ffffff;
  /* Cards restent blanches en light (contraste avec bg-surface gris tres clair) */
  --llv-bg-card: #ffffff;
  /* Surface accent (callouts, chips info) — bleu tres clair en light */
  --llv-bg-accent: #eef4f7;
  --llv-text: #454545;
  --llv-text-muted: #718096;
  --llv-border: #e2e8f0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--sl-font-sans);
  color: var(--llv-text);
  background: var(--llv-bg);
  margin: 0;
  -webkit-text-size-adjust: 100%;
  transition: background-color 0.2s, color 0.2s;
}