/* ============================================
   DESIGN TOKENS — Slijterij United Liquors
   Locked: visual direction B (Freshen — light/dark rhythm)
   Palette anchored from Framer sketch + brand-kit-v0.2
   ============================================ */

:root {
  /* ─── Colors ─── */
  --c-ink:        #0E0B08;  /* near-black with warmth */
  --c-ink-2:      #1A1612;  /* slightly lifted ink (top utility bar) */
  --c-charcoal:   #23262B;  /* dark grey — sticky header (cool, pairs with slate badge) */
  --c-bone:       #F4ECDD;  /* aged paper / label cream */
  --c-bone-2:     #FAF7F1;  /* warmer bone (welcome, contact bg) */
  --c-bone-3:     #FFFFFF;  /* pure white surfaces */
  --c-pop:        #FD5A02;  /* Dutch orange (from Framer sketch) */
  --c-pop-hover:  #E64F00;
  --c-amber:      #AE7B46;  /* warm tan accent */
  --c-mute:       #7C736A;  /* warm grey meta */
  --c-mute-2:     #2A2520;  /* darker body text on cream */
  --c-line:       rgba(0, 0, 0, 0.08);
  --c-line-dark:  rgba(255, 255, 255, 0.1);

  /* Stage backdrops (for category cards) */
  --c-stage-wine:  #3A1F22;
  --c-stage-olive: #2E2D1C;
  --c-stage-plum:  #2A1D2A;
  --c-stage-cocoa: #4A2F1F;

  /* ─── Type ─── */
  --f-display: "Albert Sans", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --f-body:    "Inter", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --t-hero:    clamp(56px, 11vw, 144px);
  --t-h2:      clamp(36px, 6vw, 64px);
  --t-h3:      clamp(24px, 3vw, 34px);
  --t-h4:      clamp(18px, 1.8vw, 22px);
  --t-body:    clamp(15px, 1.15vw, 18px);
  --t-body-lg: clamp(17px, 1.35vw, 21px);
  --t-small:   clamp(13px, 0.95vw, 14px);
  --t-eyebrow: 11px;

  /* Leading */
  --lh-display: 0.95;
  --lh-h2:      1.0;
  --lh-h3:      1.15;
  --lh-body:    1.55;

  /* Letter spacing */
  --ls-display:  -0.02em;
  --ls-h2:       -0.015em;
  --ls-eyebrow:  0.22em;

  /* ─── Spacing ─── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-section: clamp(72px, 10vw, 144px);

  /* ─── Layout ─── */
  --max-w:        1320px;
  --max-w-narrow: 760px;
  --gutter:       clamp(20px, 4vw, 48px);

  /* ─── Radius ─── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* ─── Motion ─── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:   160ms;
  --d-normal: 320ms;
  --d-slow:   600ms;

  /* ─── Shadow ─── */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lift: 0 12px 36px rgba(0, 0, 0, 0.18);

  /* ─── Z ─── */
  --z-nav: 50;
  --z-utility: 49;
  --z-modal: 100;
}

/* ─── Base body type ─── */
body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bone-2);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ─── Display heading defaults ─── */
.h-display,
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-transform: none;
}

h2 {
  font-size: var(--t-h2);
  font-weight: 800;
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-h2);
}

h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: var(--lh-h3);
}

.mono {
  font-family: var(--f-mono);
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}