/* The French Herbal — Design tokens
   :root variables only. Component styles live in components.css,
   base reset in base.css, animations in animations.css. */

/* Brand display font */
@font-face {
  font-family: 'Clutch';
  src: url('../assets/fonts/Clutch-Regular.woff2') format('woff2'),
       url('../assets/fonts/Clutch-Regular.woff')  format('woff'),
       url('../assets/fonts/Clutch-Regular.ttf')   format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ═══════════════════════════════════════════════════════════════
     BRAND PALETTE  (exact values from src/elements-pour-french-herbal)
     ═══════════════════════════════════════════════════════════════ */
  --cream:            #fbf8ea;
  --cream-deep:       #f1ead0;
  --mustard:          #F8BC3F;  /* jaune-mustard */
  --mustard-2:        #DEDC00;  /* jaune-vif */
  --orange:           #EE7526;
  --orange-deep:      #EE7422;
  --brick:            #B12931;
  --brick-deep:       #8a1d24;
  --olive:            #747203;  /* vert foncé */
  --olive-light:      #AEC38B;  /* vert sauge */
  --sage:             #AEC38B;
  --brown:            #B17F4A;
  --brown-deep:       #8a5a2a;
  --brown-warm:       #785243;  /* "By Christophe" signature tint */
  --chocolate:        #7a4a2a;
  --chocolate-light:  #8a5a3a;
  --chocolate-deep:   #5c3420;
  --chocolate-xdeep:  #6b3a1f;  /* wordmark text */
  --bark:             #4a2510;
  --leaf:             #8EC044;
  --leaf-light:       #AEC38B;

  /* Ribbon stack (top→bottom of band, matches loop.svg) */
  --r1: #DEDC00;
  --r2: #AEC38B;
  --r3: #B17F4A;
  --r4: #747203;

  /* ═══════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════ */
  --font-display: 'Clutch', 'Alfa Slab One', 'Bree Serif', Georgia, serif;
  --font-script:  'Caveat', 'Kalam', 'Caveat Brush', cursive;
  --font-body:    'Nunito', 'Helvetica Neue', Arial, sans-serif;
  --font-label:   'Clutch', 'Alfa Slab One', 'Special Elite', 'Courier New', monospace;

  /* Font-size scale — minimum 12px for Clutch legibility at small sizes */
  --text-xxs: 12px;
  --text-xs:  13px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --text-4xl: 52px;
  --text-5xl: 72px;

  /* Letter-spacing — Clutch needs narrow tracking for legibility at small sizes */
  --tracking-tight: 0.03em;
  --tracking-wide:  0.05em;
  --tracking-wider: 0.08em;

  /* ═══════════════════════════════════════════════════════════════
     SPACING SCALE  (4px base)
     ═══════════════════════════════════════════════════════════════ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ═══════════════════════════════════════════════════════════════
     RADIUS SCALE
     ═══════════════════════════════════════════════════════════════ */
  --radius-sm:   14px;  /* fields, small buttons */
  --radius-md:   20px;  /* cards internes, inputs */
  --radius-lg:   30px;  /* containers principaux */
  --radius-xl:   40px;  /* hero cards (video player, quote) */
  --radius-pill: 999px;

  /* ═══════════════════════════════════════════════════════════════
     SHADOWS
     ═══════════════════════════════════════════════════════════════ */
  /* Drop shadows (neutrals) */
  --shadow-xs: 0 0 40px rgba(0,0,0,0.06);
  --shadow-sm: 0 4px 10px rgba(0,0,0,0.12);
  --shadow-md: 0 6px 14px rgba(0,0,0,0.15);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.1);
  --shadow-xl: 0 14px 30px rgba(0,0,0,0.15);
  --shadow-2xl: 0 30px 60px rgba(0,0,0,0.3);

  /* Brick-colored glows (signature CTA look) */
  --brick-glow-sm: 0 6px 14px rgba(184,64,31,0.3);
  --brick-glow-md: 0 14px 22px rgba(184,64,31,0.25);

  /* Insets */
  --inset-input:       inset 0 2px 4px rgba(0,0,0,0.08);
  --inset-frame-olive: inset 0 0 0 3px var(--olive-light);
  --inset-frame-olive-thick: inset 0 0 0 4px var(--olive-light);
  --inset-ring-dark:   inset 0 0 0 3px rgba(0,0,0,0.15);

  /* "Ring frame" pattern — signature visuelle du brand */
  --frame-orange:        0 0 0 5px var(--orange-deep);
  --frame-orange-thick:  0 0 0 6px var(--orange-deep);
  --frame-mustard-olive: 0 0 0 6px var(--mustard), 0 0 0 10px var(--olive-light);
  --frame-mustard-brick: 0 0 0 6px var(--mustard), 0 0 0 12px var(--brick);

  /* Borders (brown-alpha dashed, used pour les séparateurs doux) */
  --border-dashed:       1px dashed rgba(107,58,31,0.25);
  --border-dashed-soft:  1px dashed rgba(107,58,31,0.15);
  --border-dashed-thick: 2px dashed rgba(107,58,31,0.3);

  /* ═══════════════════════════════════════════════════════════════
     MOTION
     ═══════════════════════════════════════════════════════════════ */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ═══════════════════════════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════════════════════════ */
  --page-w:    1440px;
  --content-w: 1120px;
  --border-w:  72px;
}