/* Tokens du Figma, fichier « Libwatch - New », collection « LW Site · Couleurs » (modes Clair / Sombre).
   Les noms suivent ceux du Figma : bg/page → --bg-page, etc. Ne jamais poser
   une couleur en dur dans une page : passer par ces variables. */
:root {
  color-scheme: light dark;

  --bg-page: #f6f5f0;
  --bg-surface: #ffffff;
  --bg-subtle: #edebe3;
  --bg-inverse: #081a5a;
  --bg-accent: #1d42ea;
  --bg-accent-hover: #0a2bae;
  --bg-accent-subtle: #eef2ff;

  --border-default: #dddacf;
  --border-strong: #0b0f1d;
  --border-accent: #1d42ea;

  --text-primary: #0b0f1d;
  --text-secondary: #3a4466;
  --text-muted: #5a6283;
  --text-on-accent: #ffffff;
  --text-accent: #1d42ea;
  --text-on-inverse: #f6f5f0;

  --critical-text: #c8281d;
  --critical-fill: #c8281d;
  --critical-subtle: #fce7e4;
  --warning-text: #9a4a00;
  --warning-subtle: #fcefd3;
  --success-text: #0b7246;
  --success-subtle: #ddf5e8;
  /* Texte posé sur success/text (bouton « Accepté », WP #18356) : blanc en
     clair comme text/on-accent du Figma ; en sombre, success/text est un vert
     clair, le texte passe en encre. */
  --text-on-success: #ffffff;
  /* Voile sous une modale : bg/inverse à 45 % dans le Figma (Prototype —
     Consentement) ; en sombre, bg/inverse est crème, le voile reste sombre. */
  --bg-overlay: #081a5a;

  --code-bg: #0b0f1d;
  --code-text: #e7e9f1;
  --code-muted: #8188a3;
  --code-accent: #8fd3ff;
  --code-border: #232d4c;

  --brand-sky: #8fd3ff;
  --brand-navy: #081a5a;
  --blue-800: #0a2bae; /* choix du thème du pied de page */
  --blue-900: #0c1f6e; /* filet du pied de page */
  --ink-300: #adb2c6;

  /* Typographie */
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Espacements space/0…14 et rayons du Figma (mêmes numéros) */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 999px;

  /* Mouvement (prototype « Consentement · micro-animations », WP #18356) :
     courbes et durées des réactions Figma. Coupé sous prefers-reduced-motion. */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-shared: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-switch: 200ms;
  --duration-confirm: 260ms;
  --duration-exit: 320ms;
  --duration-shared: 420ms;

  /* Grille : 1200 px de contenu, 120 px de marge à 1440 px */
  --container: 1200px;
  --gutter: clamp(20px, 8.333vw, 120px);
}

/* Cadres mobiles du Figma : 20 px de gouttière à 390 (8,333vw y donnerait 32,5). */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #070a14;
    --bg-surface: #0b0f1d;
    --bg-subtle: #10162a;
    --bg-inverse: #f6f5f0;
    --bg-accent: #1d42ea;
    --bg-accent-hover: #3160ff;
    --bg-accent-subtle: #13204d;

    --border-default: #232d4c;
    --border-strong: #adb2c6;
    --border-accent: #5194ff;

    --text-primary: #e7e9f1;
    --text-secondary: #adb2c6;
    --text-muted: #8188a3;
    --text-on-accent: #ffffff;
    --text-accent: #8fd3ff;
    --text-on-inverse: #0b0f1d;

    --critical-text: #ffb4ab;
    --critical-fill: #ff6b5e;
    --critical-subtle: #3b1210;
    --warning-text: #ffb547;
    --warning-subtle: #35230a;
    --success-text: #4ade9a;
    --success-subtle: #0c2a1d;
    --text-on-success: #0b0f1d;
    --bg-overlay: #000000;

    --code-bg: #10162a;
  }
}

:root[data-theme="dark"] {
  --bg-page: #070a14;
  --bg-surface: #0b0f1d;
  --bg-subtle: #10162a;
  --bg-inverse: #f6f5f0;
  --bg-accent: #1d42ea;
  --bg-accent-hover: #3160ff;
  --bg-accent-subtle: #13204d;

  --border-default: #232d4c;
  --border-strong: #adb2c6;
  --border-accent: #5194ff;

  --text-primary: #e7e9f1;
  --text-secondary: #adb2c6;
  --text-muted: #8188a3;
  --text-on-accent: #ffffff;
  --text-accent: #8fd3ff;
  --text-on-inverse: #0b0f1d;

  --critical-text: #ffb4ab;
  --critical-fill: #ff6b5e;
  --critical-subtle: #3b1210;
  --warning-text: #ffb547;
  --warning-subtle: #35230a;
  --success-text: #4ade9a;
  --success-subtle: #0c2a1d;
  --text-on-success: #0b0f1d;
  --bg-overlay: #000000;

  --code-bg: #10162a;
}