/* ============================================================
   Vinabox — Tokens (colors, type, spacing, radii, shadows, motion)
   Source: claude.ai/design — Vinabox Design System v1
   Adapté pour WordPress / GeneratePress child theme.
   Chargé en priorité 5 (avant tout autre CSS) via functions.php.
   ============================================================ */

/* Fonts — fichiers locaux dans /fonts du child theme.
   Les chemins sont relatifs au CSS file (css/ → ../fonts/). */

@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/DMSerifDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.ttf') format('truetype-variations'),
       url('../fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-VariableItalic.ttf') format('truetype-variations'),
       url('../fonts/Satoshi-VariableItalic.ttf') format('truetype');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND CORE ---------- */
  --vb-bordeaux:       #61262A;
  --vb-jaune:          #D39C44;

  /* Bordeaux scale */
  --vb-bordeaux-50:    #FBF2F2;
  --vb-bordeaux-100:   #F3DDDE;
  --vb-bordeaux-200:   #E3B5B7;
  --vb-bordeaux-300:   #CE858A;
  --vb-bordeaux-400:   #A9585D;
  --vb-bordeaux-500:   #61262A;
  --vb-bordeaux-600:   #541F23;
  --vb-bordeaux-700:   #44181B;
  --vb-bordeaux-800:   #331214;
  --vb-bordeaux-900:   #220C0D;

  /* Jaune scale */
  --vb-jaune-50:       #FBF5EA;
  --vb-jaune-100:      #F6E7C7;
  --vb-jaune-200:      #EDD195;
  --vb-jaune-300:      #E3B96A;
  --vb-jaune-400:      #DBA955;
  --vb-jaune-500:      #D39C44;
  --vb-jaune-600:      #B5842F;
  --vb-jaune-700:      #8F6623;
  --vb-jaune-800:      #6A4B19;
  --vb-jaune-900:      #463110;

  /* Neutrals — warm */
  --vb-neutral-0:      #FFFFFF;
  --vb-neutral-50:     #FAF7F4;
  --vb-neutral-100:    #F3EEE8;
  --vb-neutral-200:    #E6DFD6;
  --vb-neutral-300:    #CFC6BA;
  --vb-neutral-400:    #A89E91;
  --vb-neutral-500:    #7E7467;
  --vb-neutral-600:    #5C5448;
  --vb-neutral-700:    #403A32;
  --vb-neutral-800:    #262320;
  --vb-neutral-900:    #151311;

  /* Semantic */
  --vb-success:        #3F7D4E;
  --vb-success-bg:     #E9F3EC;
  --vb-warning:        #B5842F;
  --vb-warning-bg:     #FBF5EA;
  --vb-error:          #8E2A2A;
  --vb-error-bg:       #F7E6E6;
  --vb-info:           #2F5D7A;
  --vb-info-bg:        #E6EEF4;

  /* Semantic roles */
  --vb-bg:             var(--vb-neutral-0);
  --vb-bg-alt:         var(--vb-neutral-50);
  --vb-bg-strong:      var(--vb-bordeaux-500);
  --vb-surface:        var(--vb-neutral-0);
  --vb-surface-muted:  var(--vb-neutral-100);

  --vb-fg:             var(--vb-neutral-900);
  --vb-fg-muted:       var(--vb-neutral-600);
  --vb-fg-subtle:      var(--vb-neutral-500);
  --vb-fg-on-dark:     var(--vb-neutral-50);
  --vb-fg-on-accent:   var(--vb-bordeaux-900);

  --vb-border:         var(--vb-neutral-200);
  --vb-border-strong:  var(--vb-neutral-300);
  --vb-border-focus:   var(--vb-bordeaux-500);

  --vb-link:           var(--vb-bordeaux-500);
  --vb-link-hover:     var(--vb-bordeaux-700);

  /* Typography */
  --vb-font-serif:     'DM Serif Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --vb-font-sans:      'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --vb-font-mono:      ui-monospace, SFMono-Regular, 'JetBrains Mono', Consolas, monospace;

  --vb-text-caption:   clamp(0.72rem, 0.68rem + 0.15vw, 0.78rem);
  --vb-text-small:     clamp(0.82rem, 0.78rem + 0.2vw, 0.88rem);
  --vb-text-body:      clamp(1rem,    0.96rem + 0.2vw, 1.06rem);
  --vb-text-lead:      clamp(1.1rem,  1.02rem + 0.4vw, 1.25rem);
  --vb-text-h6:        clamp(1rem,    0.95rem + 0.3vw, 1.15rem);
  --vb-text-h5:        clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --vb-text-h4:        clamp(1.35rem, 1.2rem + 0.7vw,  1.65rem);
  --vb-text-h3:        clamp(1.65rem, 1.4rem + 1.2vw,  2.1rem);
  --vb-text-h2:        clamp(2rem,    1.6rem + 2vw,    2.85rem);
  --vb-text-h1:        clamp(2.4rem,  1.9rem + 2.8vw,  3.75rem);
  --vb-text-display:   clamp(2.9rem,  2.2rem + 3.8vw,  4.75rem);

  --vb-lh-tight:       1.1;
  --vb-lh-snug:        1.25;
  --vb-lh-normal:      1.55;
  --vb-lh-loose:       1.7;

  --vb-ls-tight:       -0.02em;
  --vb-ls-normal:      0;
  --vb-ls-wide:        0.04em;
  --vb-ls-caps:        0.12em;

  --vb-weight-light:   300;
  --vb-weight-regular: 400;
  --vb-weight-medium:  500;
  --vb-weight-bold:    700;
  --vb-weight-black:   900;

  /* Spacing — 4pt grid */
  --vb-space-0:        0;
  --vb-space-1:        4px;
  --vb-space-2:        8px;
  --vb-space-3:        12px;
  --vb-space-4:        16px;
  --vb-space-6:        24px;
  --vb-space-8:        32px;
  --vb-space-12:       48px;
  --vb-space-16:       64px;
  --vb-space-24:       96px;
  --vb-space-32:       128px;

  /* Radii */
  --vb-radius-xs:      2px;
  --vb-radius-sm:      4px;
  --vb-radius-md:      8px;
  --vb-radius-lg:      14px;
  --vb-radius-xl:      22px;
  --vb-radius-2xl:     32px;
  --vb-radius-pill:    999px;

  /* Borders */
  --vb-border-width:      1px;
  --vb-border-width-thick:2px;

  /* Shadows */
  --vb-shadow-xs:   0 1px 1px rgba(38, 18, 20, 0.04);
  --vb-shadow-sm:   0 1px 2px rgba(38, 18, 20, 0.06), 0 1px 3px rgba(38, 18, 20, 0.04);
  --vb-shadow-md:   0 4px 10px rgba(38, 18, 20, 0.08), 0 2px 4px rgba(38, 18, 20, 0.04);
  --vb-shadow-lg:   0 14px 30px rgba(38, 18, 20, 0.12), 0 4px 8px rgba(38, 18, 20, 0.06);
  --vb-shadow-xl:   0 28px 60px rgba(38, 18, 20, 0.18);
  --vb-shadow-inset:inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Z-index */
  --vb-z-base:     1;
  --vb-z-dropdown: 100;
  --vb-z-sticky:   200;
  --vb-z-overlay:  500;
  --vb-z-modal:    800;
  --vb-z-toast:    900;
  --vb-z-tooltip:  1000;

  /* Motion */
  --vb-ease:          cubic-bezier(.2, .7, .2, 1);
  --vb-ease-in:       cubic-bezier(.5, 0, .75, 0);
  --vb-duration-fast: 120ms;
  --vb-duration-base: 200ms;
  --vb-duration-slow: 320ms;
}