/* ============================================================================
   BESTYALL CIGARS — tokens.css
   This is a CLONE of the santamonicacigars.com design system, populated with
   BestYall's content. Every value below was sampled from the live reference on
   2026-07-23 (computed styles + its theme.css), not invented:

     body background   rgb(244,244,244)   #F4F4F4
     body text         rgb(25,25,25)      #191919
     heading text      rgb(28,28,28)      #1C1C1C
     accent gold       rgb(198,164,103)   #C6A467   (buttons + kickers)
     gold tint bg      --gold-bg          #FDF7EE
     sale red          rgb(227,44,43)     #E32C2B
     body/heading font Jost
     serif accent      Cormorant Garamond
     button radius     22px  (--button-border-radius: 1.375rem)
     buttons           uppercase, 1.2px letter-spacing
     kicker            12px, 3px letter-spacing, uppercase, gold
     headings          uppercase (--heading-text-transform)
   ========================================================================= */

:root {

  /* ── Palette ─────────────────────────────────────────────────────────── */
  --bg:            #F4F4F4;   /* page ground */
  --surface:       #FFFFFF;   /* cards, header, modals */
  --surface-alt:   #FDF7EE;   /* the theme's gold tint (reference value) */
  /* Sampled from the supplied product photography's own background so the
     shots blend into their container with no visible square edge. */
  --photo-bg:      #FDF8F1;
  --ink:           #191919;   /* body copy */
  --ink-strong:    #1C1C1C;   /* headings */
  --ink-dim:       #6B6B6B;   /* secondary copy */
  --line:          #E3E3E3;   /* hairline borders */
  --line-strong:   #CFCFCF;

  --gold:          #C6A467;   /* THE accent — buttons, kickers, underlines */
  --gold-dark:     #A8874B;   /* hover */
  --gold-tint:     #F2E7D2;

  --sale:          #E32C2B;
  --dark:          #191919;   /* announcement bar, dark bands, footer */

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-ui:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;

  --track-kicker: 3px;      /* the reference's exact kicker tracking */
  --track-button: 1.2px;

  --t-kicker: 12px;
  --t-xs:   0.875rem;
  --t-sm:   0.9375rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.375rem;
  --t-h3:   clamp(1.125rem, 1.03rem + 0.39vw, 1.375rem);
  --t-h2:   clamp(1.25rem, 1.07rem + 0.78vw, 1.75rem);
  --t-h1:   clamp(1.375rem, 1.15rem + 0.98vw, 2rem);
  --t-hero: clamp(2.1rem, 1.2rem + 4vw, 4rem);

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --radius-pill: 22px;      /* --button-border-radius: 1.375rem */
  --radius-card: 4px;

  /* ── Space ───────────────────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 96px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --dur-fast: 200ms;
  --dur:      320ms;
  --dur-slow: 600ms;
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);

  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-pop:  0 4px 12px rgba(0,0,0,.08), 0 24px 60px rgba(0,0,0,.12);

  --header-h: 76px;
  --z-nav: 100;
  --z-modal: 1000;
}

/* ---------------------------------------------------------------------------
   ACCESSIBILITY — honored in full.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root { --ink-dim: #4A4A4A; --line: #B9B9B9; }
}

@media (max-width: 900px) {
  :root { --s-6: 44px; --s-7: 60px; --header-h: 64px; }
}