/* La Cabane à Plantes — design tokens
   Source : maquettes v9 (sept. 2026). Noir & blanc, la couleur vient des photos.
   À charger en premier, avant base.css et components.css. */

:root {
  /* Couleurs */
  --cab-bg: #ffffff;
  --cab-bg-soft: #f7f5f0;      /* sections alternées, fond packshots, accordéons */
  --cab-bg-placeholder: #ece9e2;
  --cab-ink: #111111;          /* texte, titres, prix, icônes, boutons */
  --cab-ink-hover: #2a2a2a;
  --cab-muted: #6b6b6b;        /* contenances, fil d'Ariane, légendes — jamais pour du texte long */
  --cab-line: #e4e2dd;         /* filets, bordures, tableaux */
  --cab-on-ink: #ffffff;
  --cab-on-ink-muted: #c9c9c9;
  --cab-ok: #2f6b3a;           /* en stock */
  --cab-error: #a63a3a;        /* erreurs de formulaire */
  --cab-accent-season: transparent; /* optionnel : une couleur tirée d'une photo, barre d'annonce + 1 badge max */

  /* Typo */
  --cab-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cab-font-text: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --cab-fs-hero: clamp(34px, 4.4vw, 64px);
  --cab-fs-h1: clamp(32px, 3.6vw, 52px);
  --cab-fs-h2: clamp(26px, 2.4vw, 34px);
  --cab-fs-h3: 22px;
  --cab-fs-card: 19px;
  --cab-fs-body: 16px;
  --cab-fs-small: 14px;
  --cab-fs-meta: 13px;
  --cab-fs-label: 12px;         /* capitales espacées : nav, boutons, kickers */
  --cab-fs-badge: 10px;

  --cab-lh-tight: 1.05;
  --cab-lh-title: 1.15;
  --cab-lh-body: 1.6;

  --cab-tracking-label: 0.14em;
  --cab-tracking-kicker: 0.2em;
  --cab-tracking-logo: 0.06em;

  /* Espacements (échelle 8) */
  --cab-s-1: 8px;
  --cab-s-2: 16px;
  --cab-s-3: 24px;
  --cab-s-4: 32px;
  --cab-s-5: 48px;
  --cab-s-6: 64px;
  --cab-s-7: 88px;
  --cab-s-8: 96px;

  /* Grille */
  --cab-container: 1328px;      /* 1440 − 2 × 56 */
  --cab-gutter: 24px;
  --cab-page-pad: 56px;
  --cab-page-pad-mobile: 16px;

  /* Composants */
  --cab-radius: 10px;           /* champs et encadrés arrondis, comme les cartes (24/09) ; boutons en pilule */
  --cab-control-h: 48px;        /* boutons, champs */
  --cab-control-h-lg: 52px;     /* CTA achat */
  --cab-control-h-sm: 40px;
  --cab-touch-min: 44px;
  --cab-header-h: 92px;
  --cab-header-h-compact: 60px;
  --cab-announce-h: 36px;
  --cab-drawer-w: 420px;
  --cab-card-ratio: 4 / 5;      /* vignettes produit */
  --cab-exp-ratio: 3 / 2;       /* expériences, ateliers */
  --cab-shadow-drawer: -24px 0 48px rgba(0, 0, 0, 0.18);
  --cab-shadow-sticky: 0 -8px 24px rgba(0, 0, 0, 0.08);
  --cab-hero-scrim: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);

  /* Mouvement */
  --cab-t-fast: 150ms ease;
  --cab-t-med: 200ms ease;
}

@media (max-width: 767px) {
  :root {
    --cab-page-pad: var(--cab-page-pad-mobile);
    --cab-header-h: var(--cab-header-h-compact);
    --cab-announce-h: 32px;
    --cab-fs-h2: 26px;
    --cab-fs-card: 16px;
    --cab-fs-body: 15px;
    --cab-s-7: 40px;
    --cab-s-8: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --cab-t-fast: 0ms; --cab-t-med: 0ms; }
}