/**
 * Maison Camomille — Design tokens
 * Charte finale juin 2026 — source : conception/maquettes-html/mc_final_design_system.html
 *
 * Couche 1 (bruts) : valeurs de la charte.
 * Couche 2 (contextuelles) : sémantique dérivée — à utiliser dans composants / blocs.
 *
 * Alias de compat : --color-blue → lavender ; --btn-yellow-* ≡ primary ;
 * --font-accent / --font-script → title (Pacifico retiré) ;
 * --color-terracotta / --color-sage → beige / green-pale.
 */

:root {
  /* ═══════════════════════════════════════
     COUCHE 1 — BRUTS
  ═══════════════════════════════════════ */

  /* Jaune — couleur identitaire principale */
  --color-yellow: #dfb143;
  --color-yellow-light: #f5dfa0;
  --color-yellow-pale: #faf3e0;
  --color-yellow-dark: #bf9520;

  /* Rose — accent discret */
  --color-pink: #f3c6cc;
  --color-pink-pale: #faf0f2;
  --color-pink-border: #eeb8be;

  /* Vert — touche identitaire */
  --color-green: #1f3d2b;
  --color-green-hover: #2e5240;
  --color-green-pale: #c8d9ce;

  /* Neutres */
  --color-white: #f7f5f0;
  --color-beige: #ede8df;
  --color-beige-mid: #e4ded4;
  --color-dark: #1e1e1e;
  --color-dark-60: rgba(30, 30, 30, 0.6);
  --color-dark-35: rgba(30, 30, 30, 0.35);

  /* Accent pastel */
  --color-lavender: #c9c4e8;

  /* Alias legacy (évite CSS cassé pendant la migration) */
  --color-white-2: var(--color-beige);
  --color-white-3: var(--color-beige-mid);
  --color-dark-2: var(--color-green);
  --color-gray: var(--color-dark-60);
  --color-blue: var(--color-lavender);
  --color-terracotta: var(--color-beige);
  --color-sage: var(--color-green-pale);

  /* Typographies — Cormorant Garamond + DM Sans (Cesare / Overused Grotesk plus tard) */
  --font-title: "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-accent: var(--font-title);

  /* Espacements */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 128px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;

  /* Ombres */
  --shadow-sm: 0 2px 8px rgba(30, 30, 30, 0.06);
  --shadow-md: 0 8px 28px rgba(30, 30, 30, 0.09);
  --shadow-lg: 0 20px 56px rgba(30, 30, 30, 0.12);
  --shadow-hov: 0 16px 48px rgba(30, 30, 30, 0.14);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* Bordures */
  --border: 1px solid rgba(30, 30, 30, 0.1);
  --border-med: 1px solid rgba(30, 30, 30, 0.18);

  /* Layout */
  --max-w: 1200px;
  --header-h: 64px;

  /* ═══════════════════════════════════════
     COUCHE 2 — CONTEXTUELLES
  ═══════════════════════════════════════ */

  --color-primary: var(--color-yellow);
  --color-primary-soft: var(--color-yellow-light);
  --color-accent: var(--color-green);
  --color-text: var(--color-dark);
  --color-text-strong: var(--color-green);
  --color-text-muted: var(--color-dark-60);
  --color-text-subtle: var(--color-dark-35);
  --color-text-on-dark: var(--color-white);
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-beige);
  --color-border: var(--color-beige-mid);

  --font-heading: var(--font-title);
  --font-ui: var(--font-body);
  --font-script: var(--font-title);

  /* Boutons — primary = jaune (charte finale) */
  --btn-primary-bg: var(--color-yellow);
  --btn-primary-color: var(--color-dark);
  --btn-primary-hover-bg: var(--color-yellow-dark);

  --btn-vert-bg: var(--color-green);
  --btn-vert-color: var(--color-white);
  --btn-vert-hover-bg: var(--color-green-hover);

  /* Alias : yellow ≡ primary */
  --btn-yellow-bg: var(--btn-primary-bg);
  --btn-yellow-color: var(--btn-primary-color);

  --btn-ghost-color: var(--color-dark);
  --btn-ghost-border: transparent;

  --link-color: var(--color-text);
  --focus-ring: var(--color-dark);
}