/* Maison Aline — Tokens du design system
   Synchronisé depuis le projet Claude Design « Design Maison Aline »
   (claude.ai/design/p/9180d2f8-2a07-4ae4-8ac2-e698699df435).
   Variables natives du design : couleurs, typographie, espacements, rayons, ombres.
   Les presets éditeur WordPress équivalents sont dans theme.json. */

/* Webfonts : Cormorant Garamond (titres) + Mulish (texte).
   Auto-hébergées dans assets/css/fonts.css (@font-face + woff2 locaux),
   enqueue AVANT ce fichier par fse_theme_enqueue_assets() — plus de requête
   vers fonts.googleapis.com (perf + RGPD). */

:root {
  /* ============ COULEURS ============ */
  /* Crème / ivoire (page + surfaces claires) */
  --cream-50:  #FDF8EF;
  --cream-100: #FAF3E6;
  --cream-200: #F8EEDC;   /* fond de page */
  --cream-300: #F4EADB;   /* section alt / surface carte */
  --cream-400: #EDE0CB;   /* bande feature, remplissages */
  --cream-500: #E6D8C2;   /* bordures sur crème */

  /* Ochre / or (accent de marque) */
  --gold-100: #F3E7CE;    /* fond de tag/badge doux */
  --gold-200: #EBD9B2;
  --gold-300: #DCC089;
  --gold-400: #CDAE78;
  --gold-500: #B89456;    /* accent principal */
  --gold-600: #A67F44;    /* hover / pressed */
  --gold-700: #8A6836;    /* fond de bouton (texte blanc AA ≥ 4.5:1) */
  --gold-800: #7A5A2E;    /* accent-texte accessible sur clair (eyebrow, liens, labels) */
  --sun:      #F2DDB8;

  /* Espresso / bark (texte, bandes sombres, footer) */
  --bark-300: #7A6752;    /* texte atténué (assombri pour AA ≥ 4.5:1 sur crème) */
  --bark-400: #6E5C49;
  --bark-500: #51402F;
  --bark-600: #3D3024;    /* texte principal */
  --bark-700: #3C2B1A;    /* bande héro */
  --bark-800: #2E2014;    /* footer */
  --bark-900: #241809;

  /* Tons montagne (illustration / imagerie) */
  --mtn-light: #D8C6A8;
  --mtn-300:   #B9A489;   /* icône atténuée sur crème */
  --mtn-mid:   #B59A73;
  --mtn-deep:  #8A6F4E;
  --mtn-dark:  #5A4631;

  /* Neutres */
  --white: #FFFFFF;
  --black: #1A1208;

  /* Alias sémantiques — surfaces */
  --surface-page:    var(--cream-200);
  --surface-raised:  var(--white);
  --surface-alt:     var(--cream-300);
  --surface-band:    var(--cream-400);
  --surface-card:    var(--white);
  --surface-inverse: var(--bark-800);
  --surface-hero:    var(--bark-700);

  /* Alias sémantiques — texte */
  --text-heading:       var(--bark-600);
  --text-body:          var(--bark-400);
  --text-muted:         var(--bark-300);
  --text-on-dark:       var(--cream-100);
  --text-on-dark-muted: #B7A186;
  --text-accent:        var(--gold-800);
  --text-link:          var(--gold-800);

  /* Alias sémantiques — actions */
  --action-primary:       var(--gold-700);   /* fond plein + texte blanc → AA ≥ 4.5:1 */
  --action-primary-hover: var(--gold-800);
  --action-primary-text:  var(--white);
  --action-on-dark:       var(--gold-500);

  /* Alias sémantiques — bordures & accents */
  --border-subtle:  var(--cream-500);
  --border-strong:  #D8C4A6;
  --border-on-dark: rgba(255,255,255,0.14);
  --accent:         var(--gold-500);
  --accent-soft:    var(--gold-200);
  --focus-ring:     rgba(184,148,86,0.45);

  /* ============ TYPOGRAPHIE ============ */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body:    'Mulish', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  --fs-display: clamp(40px, 5.2vw, 72px);
  --fs-h1: 44px; --fs-h2: 36px; --fs-h3: 26px; --fs-h4: 21px;
  --fs-lead: 18px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 13px; --fs-label: 12.5px;

  --lh-tight: 1.08; --lh-snug: 1.22; --lh-normal: 1.5; --lh-relaxed: 1.7;
  --ls-display: -0.01em; --ls-tight: -0.005em; --ls-normal: 0;
  --ls-label: 0.18em; --ls-wide: 0.08em;

  /* Rôles sémantiques typographiques */
  --type-eyebrow-size:    var(--fs-label);
  --type-eyebrow-spacing: var(--ls-label);

  /* ============ ESPACEMENTS (base 4px) ============ */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-32: 128px;

  --gap-inline: 12px; --gap-card: 24px; --pad-card: 24px;
  --section-y: 96px; --container: 1180px; --container-pad: 32px;

  /* ============ RAYONS & OMBRES ============ */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-pill: 999px; --radius-circle: 50%;

  --shadow-xs:   0 1px 2px rgba(60,43,26,0.06);
  --shadow-sm:   0 2px 8px rgba(60,43,26,0.07);
  --shadow-md:   0 10px 24px rgba(60,43,26,0.10);
  --shadow-lg:   0 18px 44px rgba(60,43,26,0.14);
  --shadow-card: 0 14px 32px rgba(74,59,42,0.12);
  --shadow-btn:  0 6px 16px rgba(184,148,86,0.30);

  /* Anneau de focus composé */
  --ring: 0 0 0 3px var(--focus-ring);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms;
}