/* ==========================================================================
   Snackery Labs · tokens.css · v2 (real brand)
   Fonts: Syne only (400-800 weights) — single-family, distinctive,
   already in use on live snackerylabs.com. Emphasis via yellow
   highlight pill (not italic-serif cliche).
   ========================================================================== */

:root {
  /* ── COLOR · BRAND ──────────────────────────────────────────── */
  --color-ink-900:  #0b0b0b;
  --color-ink-800:  #151515;   /* live-site preloader/dark bg */
  --color-ink-700:  #1f1f1f;
  --color-ink-600:  #2b2b2b;
  --color-ink-500:  #3a3a3a;
  --color-ink-400:  #5a5a5a;
  --color-ink-300:  #8a8a8a;
  --color-ink-200:  #b8b8b8;
  --color-ink-100:  #e0e0e0;
  --color-ink-50:   #f2f2f2;

  --color-indigo-900: #0b0d4a;
  --color-indigo-800: #101585;   /* brand primary deep */
  --color-indigo-700: #1b22a8;
  --color-indigo-600: #2730c8;
  --color-indigo-500: #3f48d9;
  --color-indigo-400: #6b72e6;
  --color-indigo-300: #9ca1ef;
  --color-indigo-200: #c8cbf6;
  --color-indigo-100: #e7e9fc;
  --color-indigo-50:  #f3f4fe;

  --color-yellow-900: #8a6b00;
  --color-yellow-800: #b8910f;
  --color-yellow-700: #d4b600;
  --color-yellow-600: #e6c400;
  --color-yellow-500: #F4F73B;   /* Snackery lemon */
  --color-yellow-400: #ffe36d;
  --color-yellow-300: #ffe98f;
  --color-yellow-200: #fff2b8;
  --color-yellow-100: #fff8d6;
  --color-yellow-50:  #fffceb;

  --color-paper:    #f6f4ea;   /* warm cream paper (food-metaphor flavor) */
  --color-paper-2:  #fffaea;
  --color-white:    #ffffff;

  /* ── COLOR · SEMANTIC ──────────────────────────────────────── */
  --color-bg:            var(--color-paper);
  --color-bg-elevated:   var(--color-white);
  --color-bg-inverse:    var(--color-ink-800);
  --color-bg-brand:      var(--color-indigo-800);

  --color-fg:            var(--color-ink-900);
  --color-fg-muted:      var(--color-ink-400);
  --color-fg-subtle:     var(--color-ink-300);
  --color-fg-inverse:    var(--color-white);
  --color-fg-brand:      var(--color-indigo-800);
  --color-fg-accent:     var(--color-yellow-500);   /* on DARK bgs */
  --color-fg-accent-ink: var(--color-yellow-700);   /* on LIGHT bgs (AA-safe) */

  --color-border:        #d8d4c2;
  --color-border-strong: var(--color-ink-400);

  --color-primary:       var(--color-yellow-500);
  --color-on-primary:    var(--color-ink-900);
  --color-accent:        var(--color-yellow-500);
  --color-on-accent:     var(--color-ink-900);

  --color-focus-ring:    var(--color-yellow-500);

  /* ── TYPOGRAPHY · FAMILIES ─────────────────────────────────
     Single-family system: Syne at multiple weights (400-800).
     Why: Syne is on the live snackerylabs.com already, has real
     geometric personality, is NOT in the AI-generator default
     rotation, and pairs naturally with the chunky sliced wordmark.
     No serif display, no mono. Emphasis = yellow highlight pill,
     not italic. ──────────────────────────────────────────── */
  --font-display:  "Rubik", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:     "Work Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* ── TYPOGRAPHY · SCALE ────────────────────────────────────── */
  --fs-3xs: 11px;
  --fs-2xs: 12px;
  --fs-xs:  13px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;
  --fs-5xl: 56px;
  --fs-6xl: 76px;
  --fs-7xl: 104px;

  --lh-tight:   1.0;
  --lh-snug:    1.1;
  --lh-normal:  1.3;
  --lh-relaxed: 1.55;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --ls-tighter:  -0.025em;
  --ls-tight:    -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.02em;
  --ls-wider:    0.06em;
  --ls-widest:   0.1em;

  /* ── SPACING · 4pt base ─────────────────────────────────────── */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px;
  --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px;
  --space-12: 96px; --space-13: 128px; --space-14: 160px; --space-15: 200px;

  --section-y-sm: 80px;
  --section-y-md: 120px;
  --section-y-lg: 160px;
  --section-y-xl: 240px;

  /* ── RADIUS ─────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  36px;
  --radius-pill: 999px;

  /* ── SHADOW ─────────────────────────────────────────────────── */
  --shadow-1: 0 2px 6px rgba(11,11,11,0.06);
  --shadow-2: 0 8px 20px rgba(11,11,11,0.08);
  --shadow-3: 0 20px 48px rgba(11,11,11,0.12);
  --shadow-4: 0 32px 80px rgba(16,21,133,0.18);
  --shadow-brand-glow: 0 0 0 6px rgba(255,221,68,0.35);

  /* ── MOTION ─────────────────────────────────────────────────── */
  --dur-fast:    150ms;
  --dur-normal:  240ms;
  --dur-slow:    400ms;
  --dur-cinematic: 800ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── LAYOUT ─────────────────────────────────────────────────── */
  --container-narrow: 760px;
  --container-base:   1120px;
  --container-wide:   1320px;
  --container-max:    1440px;
  --gutter-mobile:    20px;
  --gutter-tablet:    32px;
  --gutter-desktop:   48px;

  --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-dropdown: 40;
  --z-overlay: 80; --z-modal: 100; --z-toast: 200; --z-tooltip: 500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-normal: 0ms;
    --dur-slow: 0ms;
    --dur-cinematic: 0ms;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display utility — Syne at heavy weight, yellow highlight-pill for accents.
   The highlight pill is our signature emphasis device: literally a
   popcorn-yellow mark on the accent word. Replaces italic-serif cliche. */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);        /* 800 */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--color-fg);
  margin: 0;
}
.display em {
  font-style: normal;
  font-weight: inherit;
  color: var(--color-ink-900);
  background: var(--color-yellow-500);
  padding: 0 0.18em 0.04em;
  border-radius: 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Alt accent — used on dark backgrounds: yellow text, no highlight */
.display--dark em {
  background: transparent;
  color: var(--color-yellow-500);
  padding: 0;
}
.display-hero { font-size: clamp(44px, 6.2vw, var(--fs-6xl)); }
.display-h1   { font-size: clamp(36px, 5vw, var(--fs-5xl)); }
.display-h2   { font-size: clamp(28px, 3.8vw, var(--fs-4xl)); }
.display-h3   { font-size: var(--fs-3xl); }
.display-h4   { font-size: var(--fs-2xl); }

.body-lead { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--color-fg-muted); max-width: 60ch; }
.body      { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--color-fg); max-width: 66ch; }
.body-sm   { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--color-fg-muted); }

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

a {
  color: var(--color-fg-brand);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-indigo-600); }
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); border-radius: var(--radius-xs); }

.container {
  width: 100%;
  max-width: var(--container-base);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 720px)  { .container { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1100px) { .container { padding-inline: var(--gutter-desktop); } }
.container-wide   { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }

/* ── Rotating popcorn · shared animation ──────────────────── */
@keyframes popcorn-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.popcorn-rotate {
  animation: popcorn-rotate 32s linear infinite;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .popcorn-rotate { animation: none; }
}