/* ==========================================================================
   Les Cordons Bleus : tokens du design system
   Miroir exact des variables du fichier Figma « Les Cordons Bleus · Design System »
   (https://www.figma.com/design/YBHc1iHAaVoEA4keMbvNaY) : même nom, même valeur.
   Variable Figma color/text/primary  ⇄  CSS --color-text-primary.

   Pour changer de DA : modifier les primitives (--palette-*) et les polices
   (--font-*). Les composants n'utilisent que les rôles (--color-*, --space-*…).
   ========================================================================== */

:root {
  /* ---------- Primitives (valeurs brutes, jamais utilisées directement) ---------- */
  --palette-blue-50: #EEF5FE;
  --palette-blue-75: #D3E6FB;
  --palette-blue-100: #BCD9F9;
  --palette-blue-500: #1A4D8C;
  --palette-blue-700: #133B6E;
  --palette-blue-900: #0E2546;
  --palette-tomato-100: #FCE3D8;
  --palette-tomato-400: #E8673F;
  --palette-tomato-600: #C4471E;
  --palette-tomato-700: #A33A17;
  --palette-tomato-800: #8A3013;
  --palette-apricot-100: #FBE6D7;
  --palette-apricot-400: #EC925D;
  --palette-lemon-100: #FFF4C7;
  --palette-lemon-300: #FFD552;
  --palette-lemon-500: #E9AE1D;
  --palette-lemon-800: #6A4E00;
  --palette-olive-100: #EFF2D2;
  --palette-olive-400: #AAB536;
  --palette-olive-700: #56611A;
  --palette-teal-100: #D6EDEF;
  --palette-teal-400: #61AAB0;
  --palette-teal-700: #1F6469;
  --palette-sand-100: #FAF1E6;
  --palette-sand-200: #EED7BD;
  --palette-neutral-0: #FFFFFF;
  --palette-neutral-25: #FFFDF8;
  --palette-neutral-200: #E6E1D8;
  --palette-neutral-400: #7D8494;
  --palette-neutral-600: #4A5367;
  --palette-neutral-900: #16233A;

  /* ---------- Spacing ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-112: 112px;

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---------- Polices ---------- */
  --font-display: "Calistoga", Georgia, serif;
  --font-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-logo: "BioRhyme", Georgia, serif; /* nom du logo uniquement */
  --font-note: "Kalam", "Comic Sans MS", cursive;

  /* ---------- Ombres (effect styles Figma Shadow/…) ---------- */
  --shadow-card: 0 1px 3px rgba(22, 35, 58, 0.06), 0 1px 2px rgba(22, 35, 58, 0.04);
  --shadow-card-hover: 0 12px 28px -6px rgba(22, 35, 58, 0.16);
  --shadow-floating: 0 18px 40px -10px rgba(22, 35, 58, 0.24);
  --shadow-action: 0 8px 18px -6px rgba(196, 71, 30, 0.35);

  /* ---------- Mouvement (proposition D3 de l'audit) ----------
     3 durées, 2 courbes. Tout est coupé si l'utilisateur a demandé
     « réduire les animations » (voir en bas de fichier). */
  --duration-fast: 180ms;
  --duration-normal: 350ms;
  --duration-slow: 750ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Mise en page ---------- */
  --container: 1280px;
  --gutter: var(--space-80);
  --section-y: var(--space-96);
  --header-h: 72px;
}

/* ---------- Color : mode Light (par défaut) ---------- */
:root,
.tone-light {
  --color-bg-page: var(--palette-sand-100);
  --color-bg-surface: var(--palette-neutral-0);
  --color-bg-surface-raised: var(--palette-neutral-25);
  --color-bg-subtle: var(--palette-sand-200);
  --color-bg-subtle-sky: var(--palette-blue-75);
  --color-bg-inverse: var(--palette-blue-900);
  --color-bg-disabled: var(--palette-neutral-200);
  --color-text-primary: var(--palette-neutral-900);
  --color-text-secondary: var(--palette-neutral-600);
  --color-text-accent: var(--palette-tomato-700);
  --color-text-note: var(--palette-blue-900);
  --color-text-link: var(--palette-blue-500);
  --color-text-inverse: var(--palette-neutral-25);
  --color-text-on-action: var(--palette-neutral-0);
  --color-text-on-secondary: var(--palette-neutral-0);
  --color-text-on-highlight: var(--palette-neutral-900);
  --color-text-disabled: var(--palette-neutral-400);
  --color-action-primary: var(--palette-tomato-600);
  --color-action-primary-hover: var(--palette-tomato-700);
  --color-action-primary-pressed: var(--palette-tomato-800);
  --color-action-secondary: var(--palette-blue-500);
  --color-action-secondary-hover: var(--palette-blue-700);
  --color-action-highlight: var(--palette-lemon-300);
  --color-action-highlight-hover: var(--palette-lemon-500);
  --color-border-default: var(--palette-neutral-200);
  --color-border-strong: var(--palette-neutral-400);
  --color-border-focus: var(--palette-blue-700);
  --color-status-success-bg: var(--palette-olive-100);
  --color-status-success-text: var(--palette-olive-700);
  --color-status-warning-bg: var(--palette-lemon-100);
  --color-status-warning-text: var(--palette-lemon-800);
  --color-status-error-bg: var(--palette-tomato-100);
  --color-status-error-text: var(--palette-tomato-700);
  --color-status-info-bg: var(--palette-blue-50);
  --color-status-info-text: var(--palette-blue-500);
  --color-deco-tomato: var(--palette-tomato-400);
  --color-deco-apricot: var(--palette-apricot-400);
  --color-deco-lemon: var(--palette-lemon-300);
  --color-deco-olive: var(--palette-olive-400);
  --color-deco-teal: var(--palette-teal-400);
  --color-deco-sky: var(--palette-blue-100);
  --color-deco-sky-subtle: var(--palette-blue-50);
  --color-logo: var(--palette-blue-500);
  /* Lou Chef : pastille citron, chef bleu nuit (10,9:1), identiques en mode Dark */
  --color-louchef-bg: var(--palette-lemon-300);
  --color-louchef-icon: var(--palette-blue-900);
}

/* ---------- Color : mode Dark (sections sur fond bleu nuit) ----------
   Figma : mode « Dark » appliqué au cadre de la section.
   Code : classe .tone-dark sur la section. */
.tone-dark {
  --color-bg-page: var(--palette-blue-900);
  --color-bg-surface: var(--palette-blue-700);
  --color-bg-surface-raised: var(--palette-blue-700);
  --color-bg-subtle: var(--palette-blue-700);
  --color-bg-subtle-sky: var(--palette-blue-700);
  --color-bg-inverse: var(--palette-sand-100);
  --color-bg-disabled: var(--palette-blue-700);
  --color-text-primary: var(--palette-neutral-25);
  --color-text-secondary: var(--palette-sand-200);
  --color-text-accent: var(--palette-apricot-400);
  --color-text-note: var(--palette-neutral-25);
  --color-text-link: var(--palette-blue-100);
  --color-text-inverse: var(--palette-neutral-900);
  --color-text-on-secondary: var(--palette-neutral-900);
  --color-action-secondary: var(--palette-neutral-25);
  --color-action-secondary-hover: var(--palette-sand-200);
  --color-border-default: var(--palette-blue-700);
  --color-border-strong: var(--palette-sand-200);
  --color-border-focus: var(--palette-lemon-300);
  --color-logo: var(--palette-neutral-25);
  color: var(--color-text-primary);
}

/* ---------- Text styles (mêmes noms que dans Figma) ---------- */
.t-display-xl { font: 400 72px/1.05 var(--font-display); letter-spacing: -0.01em; }
.t-display-mobile { font: 400 44px/1.1 var(--font-display); letter-spacing: -0.005em; }
.t-heading-1 { font: 400 48px/1.15 var(--font-display); letter-spacing: -0.005em; }
.t-heading-1-mobile { font: 400 34px/1.18 var(--font-display); }
.t-heading-2 { font: 400 36px/1.2 var(--font-display); }
.t-heading-3 { font: 400 24px/1.25 var(--font-display); }
.t-heading-4 { font: 400 20px/1.3 var(--font-display); }
.t-heading-5 { font: 400 18px/1.3 var(--font-display); }
.t-quote { font: 400 20px/1.5 var(--font-display); }
.t-body-l { font: 400 18px/1.6 var(--font-text); }
.t-body-m { font: 400 16px/1.6 var(--font-text); }
.t-body-s { font: 400 14px/1.55 var(--font-text); }
.t-label-m { font: 600 16px/1.2 var(--font-text); }
.t-label-s { font: 600 14px/1.2 var(--font-text); }
.t-eyebrow { font: 700 12px/1.2 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase; }
.t-badge { font: 700 12px/1 var(--font-text); letter-spacing: 0.06em; text-transform: uppercase; }
.t-caption { font: 400 13px/1.4 var(--font-text); }
.t-note { font: 400 20px/1.3 var(--font-note); }
.t-note-s { font: 400 17px/1.3 var(--font-note); }

@media (max-width: 767px) {
  :root {
    --gutter: var(--space-20);
    --section-y: var(--space-64);
    --header-h: 64px;
  }
  .t-display-xl { font-size: 44px; line-height: 1.1; letter-spacing: -0.005em; }
  .t-heading-1 { font-size: 34px; line-height: 1.18; letter-spacing: 0; }
  .t-heading-2 { font-size: 28px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  :root { --gutter: var(--space-40); }
  .t-display-xl { font-size: 56px; }
  .t-heading-1 { font-size: 40px; }
}

/* ---------- « Réduire les animations » ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}