/* iWanna Gummies — tokens.css */
@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&family=Assistant:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;500;600&display=swap');

:root {
  --brand-teal: #108474; --brand-teal-deep: #0b5e53; --brand-teal-mist: #e7f2f0;
  --p-sleep: #A266C1; --p-sleep-mist: #f4ecf8; --p-sleep-soft: #e6d5ef; --p-sleep-deep: #6f3f8a;
  --p-focus: #8ABD59; --p-focus-mist: #f0f6e7; --p-focus-soft: #d9eac3; --p-focus-deep: #5d8537;
  --p-relax: #DD1183; --p-relax-mist: #fde7f1; --p-relax-soft: #f5b8d7; --p-relax-deep: #9a0a5b;
  --p-wakeup: #EF4952; --p-wakeup-mist: #fdebec; --p-wakeup-soft: #f8bdc1; --p-wakeup-deep: #b32830;
  --ink: #1a1a1a; --ink-soft: #3d3d3d; --ink-mute: #6b6b6b; --ink-faint: #a0a0a0;
  --paper: #ffffff; --paper-warm: #fcfaf6; --paper-cream: #f7f3ec;
  --hairline: #e8e3da; --hairline-strong: #d4cec3;
  --font-display: 'Bruno Ace SC', 'Times New Roman', serif;
  --font-heading: 'Assistant', 'Helvetica Neue', sans-serif;
  --font-body: 'Open Sans', 'Helvetica Neue', sans-serif;
  --t-hero: clamp(2.75rem, 6vw, 5.25rem);
  --t-display: clamp(2rem, 4vw, 3.5rem);
  --t-h1: clamp(2rem, 3.5vw, 3rem);
  --t-h2: clamp(1.5rem, 2.5vw, 2.25rem);
  --t-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --t-h4: clamp(1.0625rem, 1.2vw, 1.125rem);
  --t-body-lg: clamp(1.0625rem, 1.1vw, 1.1875rem);
  --t-body: 1rem; --t-small: 0.875rem; --t-eyebrow: 0.75rem;
  --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.65;
  --tr-tight: -0.02em; --tr-snug: -0.01em; --tr-normal: 0; --tr-wide: 0.06em; --tr-widest: 0.18em;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;
  --lift-1: 0 1px 0 rgba(26,26,26,0.04), 0 1px 2px rgba(26,26,26,0.04);
  --lift-2: 0 4px 12px rgba(26,26,26,0.06), 0 1px 2px rgba(26,26,26,0.04);
  --lift-3: 0 16px 32px rgba(26,26,26,0.08), 0 2px 8px rgba(26,26,26,0.04);
  --ease-standard: cubic-bezier(.16, 1, .3, 1);
  --ease-out-soft: cubic-bezier(.22, .61, .36, 1);
  --d-fast: 180ms; --d-base: 280ms; --d-slow: 600ms; --d-reveal: 800ms;
  --gutter: clamp(20px, 4vw, 56px);
  --col-max: 1320px; --col-narrow: 880px; --col-prose: 640px;
  --z-promo: 60; --z-header: 50; --z-overlay: 100; --z-modal: 200;
}

.paper-grain { position: relative; isolation: isolate; }
.paper-grain::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px; opacity: 0.6; mix-blend-mode: multiply;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-normal); color: var(--ink); background: var(--paper); font-weight: 400; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 3px; border-radius: var(--r-xs); }

.container { width: 100%; max-width: var(--col-max); margin: 0 auto; padding-inline: var(--gutter); }
.container-narrow { width: 100%; max-width: var(--col-narrow); margin: 0 auto; padding-inline: var(--gutter); }
.container-prose { width: 100%; max-width: var(--col-prose); margin: 0 auto; padding-inline: var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
