/*
Theme Name: Salon du Chocolat - Hello Child
Template: hello-elementor
Description: Thème enfant du Salon du Chocolat et des Douceurs de Tarbes. Contient les tokens de la charte v1 (polices chargées en local via Elementor).
Author: ERA STUDIO
Version: 1.1.0
Text Domain: sct-child
*/

/* Salon du Chocolat et des Douceurs de Tarbes — tokens v1 */

:root {
  /* — Couleurs : palette — */
  --color-creme-50:  #FDF7EE;  /* surfaces, cartes */
  --color-creme-100: #FAECD8;  /* fond principal (logo) */
  --color-creme-200: #F2DCBE;  /* fonds secondaires, chips */
  --color-creme-300: #E6C8A0;  /* bordures, filets */
  --color-cacao-900: #3E170C;  /* texte courant, fonds foncés */
  --color-cacao-800: #521F11;  /* logo, titres, bouton primaire */
  --color-lait-600:  #7A3B1F;  /* texte secondaire, survol */
  --color-praline-500: #9C5328; /* texte ≥ 16 px, illustrations */
  --color-caramel-700: #8E5317; /* texte doré sur clair, focus */
  --color-caramel-500: #C97E2E; /* accent déco, badges, filets */
  --color-caramel-300: #E3AE6A; /* accent texte sur foncé */

  /* — États — */
  --color-success-600: #2F6B3A;  --color-success-50: #E6F0E3;
  --color-error-600:   #A3261B;  --color-error-50:   #F8E1DC;
  --color-info-600:    #2C5A7A;  --color-info-50:    #E1EBF2;

  /* — Sémantique — */
  --color-bg:            var(--color-creme-100);
  --color-surface:       var(--color-creme-50);
  --color-surface-alt:   var(--color-creme-200);
  --color-border:        var(--color-creme-300);
  --color-text:          var(--color-cacao-900);   /* 13.5:1 */
  --color-text-strong:   var(--color-cacao-800);   /* 11.6:1 */
  --color-text-muted:    var(--color-lait-600);    /*  7.3:1 */
  --color-text-accent:   var(--color-caramel-700); /*  5.3:1 */
  --color-accent:        var(--color-caramel-500); /* déco uniquement sur clair */
  --color-inverse-bg:    var(--color-cacao-900);
  --color-inverse-text:  var(--color-creme-100);   /* 13.5:1 */
  --color-inverse-muted: var(--color-creme-300);   /*  9.8:1 */
  --color-inverse-accent:var(--color-caramel-300); /*  7.8:1 */
  --color-focus:         var(--color-caramel-700);

  /* — Typographie — */
  --font-display: 'Fraunces', Georgia, serif;
  --font-info:    'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* mobile-first ; valeurs desktop dans la media query */
  --fs-display: 56px;  --lh-display: 1.0;
  --fs-h1: 40px;       --lh-h1: 1.05;
  --fs-h2: 32px;       --lh-h2: 1.1;
  --fs-h3: 24px;       --lh-h3: 1.2;
  --fs-h4: 20px;       --lh-h4: 1.3;
  --fs-info: 24px;     --lh-info: 1.1;
  --fs-overline: 14px; --ls-overline: .14em;
  --fs-body-lg: 18px;  --fs-body: 16px;  --lh-body: 1.6;
  --fs-small: 14px;    --fs-caption: 13px;
  --fw-display: 800;   --fw-title: 700;  --fw-sub: 600;

  /* — Espacements (base 4) — */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* — Rayons — */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px;
  --radius-lg: 20px; --radius-drop: 32px 32px 32px 8px; --radius-pill: 999px;

  /* — Ombres — */
  --shadow-sm: 0 1px 2px rgba(62,23,12,.08);
  --shadow-md: 0 2px 4px rgba(62,23,12,.06), 0 10px 24px rgba(62,23,12,.10);
  --shadow-lg: 0 4px 8px rgba(62,23,12,.06), 0 24px 48px rgba(62,23,12,.14);
  --shadow-focus: 0 0 0 3px var(--color-creme-100), 0 0 0 5px var(--color-focus);

  /* — Grille — */
  --grid-columns: 4;  --grid-gutter: 16px;  --grid-margin: 20px;
  --container-max: 1200px;

  /* — Composants — */
  --btn-height: 52px;  --input-height: 52px;  --tap-min: 44px;
  --header-height: 64px;
}

/* Breakpoints : sm 480 · md 768 · lg 1024 · xl 1440 */
@media (min-width: 768px) {
  :root { --grid-columns: 8; --grid-gutter: 20px; --grid-margin: 32px; }
}
@media (min-width: 1024px) {
  :root {
    --grid-columns: 12; --grid-gutter: 24px; --grid-margin: 48px;
    --header-height: 84px;
    --fs-display: 88px; --fs-h1: 64px; --fs-h2: 44px; --fs-h3: 30px;
    --fs-h4: 22px; --fs-info: 32px; --fs-overline: 15px;
    --fs-body-lg: 19px; --fs-body: 17px; --fs-small: 15px;
  }
}