/**
 * Maison Camomille — Design tokens
 *
 * Couche 1 (bruts) : valeurs issues du design system HTML (charte V1).
 * Couche 2 (contextuelles) : sémantique dérivée — à utiliser dans composants / blocs.
 */

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

  /* Couleurs principales */
  --color-yellow: #dfb143;
  --color-yellow-light: #f5dfa0;
  --color-white: #f6f5f4;
  --color-white-2: #edefef;
  --color-white-3: #e8e8e8;

  /* Neutres */
  --color-dark: #1e1e1e;
  --color-dark-2: #313131;
  --color-gray: #777775;

  /* Pastels (accents) */
  --color-pink: #e9cddd;
  --color-blue: #b4c2ef;
  --color-terracotta: #d88879;
  --color-sage: #93896f;

  /* Typographies */
  --font-title: "Playfair Display", Georgia, serif;
  --font-body: "Jost", sans-serif;
  --font-accent: "Pacifico", cursive;

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

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

  /* Ombres */
  --shadow-sm: 0 1px 4px rgba(30, 30, 30, 0.06);
  --shadow-md: 0 4px 16px rgba(30, 30, 30, 0.08);
  --shadow-lg: 0 12px 40px rgba(30, 30, 30, 0.1);

  /* Motion */
  --transition: 0.2s ease;

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

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

  --color-primary: var(--color-yellow);
  --color-primary-soft: var(--color-yellow-light);
  --color-text: var(--color-dark);
  --color-text-strong: var(--color-dark-2);
  --color-text-muted: var(--color-gray);
  --color-text-on-dark: var(--color-white);
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-white-2);
  --color-border: var(--color-white-3);

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

  --btn-primary-bg: var(--color-dark);
  --btn-primary-color: var(--color-white);
  --btn-primary-hover-bg: var(--color-dark-2);
  --btn-yellow-bg: var(--color-yellow);
  --btn-yellow-color: var(--color-dark);
  --btn-ghost-color: var(--color-gray);
  --btn-ghost-border: var(--color-white-3);

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