/**
 * Maverick Distilling — Design Tokens
 *
 * Single source of truth for the brand's visual constants.
 *
 * IMPORTANT: These same values must also be entered in
 * Elementor -> Site Settings -> Global Colors / Global Fonts.
 * Elementor widgets read from there, not from this file. See README.md
 * for the mapping table. This file covers custom code, custom widgets,
 * and anything Elementor's controls cannot reach.
 */

:root {
  /* ---- Surfaces -------------------------------------------------- */
  --mvk-ink:            #0F0D0B; /* primary dark background          */
  --mvk-ink-panel:      #141110; /* raised dark panel                */
  --mvk-cream:          #EFE7D8; /* primary light background         */
  --mvk-cream-card:     #E7DDCA; /* card on cream                    */
  --mvk-cream-card-alt: #E2D6BF; /* card on cream, hover             */

  /* ---- Type ------------------------------------------------------ */
  --mvk-text-light:     #FBF7EF; /* body text on dark                */
  --mvk-text-dark:      #1A150F; /* body text on cream               */

  /* ---- Brand gold ------------------------------------------------
     Three values, not one. Each has a job — do not substitute.
     gold      : buttons, rules, borders
     gold-warm : eyebrow + label text ON DARK (passes AA where gold fails)
     gold-deep : eyebrow + label text ON CREAM
  ------------------------------------------------------------------ */
  --mvk-gold:           #C1954A;
  --mvk-gold-warm:      #E8C583;
  --mvk-gold-deep:      #96702C;

  /* ---- Hairlines ------------------------------------------------- */
  --mvk-rule-light:     rgba(251, 247, 239, 0.14);
  --mvk-rule-dark:      rgba(26, 21, 15, 0.18);
  --mvk-rule-gold:      rgba(193, 149, 74, 0.42);

  /* ---- Typography ------------------------------------------------ */
  --mvk-font-display:   'Instrument Serif', Georgia, serif;
  --mvk-font-body:      'Archivo', system-ui, -apple-system, sans-serif;

  /* Fluid display scale. Clamp pairs are deliberate — the max values
     are what the design was composed against at 1400px. */
  --mvk-size-h1:        clamp(42px, 7vw, 108px);
  --mvk-size-h2:        clamp(30px, 3.8vw, 54px);
  --mvk-size-h3:        clamp(21px, 2.2vw, 30px);
  --mvk-size-body:      17px;
  --mvk-size-body-lg:   17.5px;
  --mvk-size-small:     15px;

  /* Eyebrow / overline — the site's signature label treatment */
  --mvk-size-eyebrow:   10.5px;
  --mvk-track-eyebrow:  0.42em;
  --mvk-track-button:   0.24em;
  --mvk-track-label:    0.26em;

  /* ---- Layout ---------------------------------------------------- */
  --mvk-max:            1400px;
  --mvk-gutter:         clamp(20px, 4vw, 64px);
  --mvk-section-y:      clamp(64px, 10vh, 130px);

  /* ---- Header ---------------------------------------------------- */
  --mvk-logo-h:         100px;  /* at rest              */
  --mvk-logo-h-stuck:   56px;   /* after scroll         */
  --mvk-logo-h-sm:      62px;   /* mobile, at rest      */
  --mvk-logo-h-sm-stuck: 44px;  /* mobile, after scroll */
  --mvk-header-ease:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Motion ---------------------------------------------------- */
  --mvk-pan-scale:      1.14; /* full-bleed parallax  */
  --mvk-pan-scale-soft: 1.04; /* product parallax     */
}