/* ───────────────────────────────────────────────────────────────────────── * topvapeflavors.com · tokens.css — Olit Hookah Heritage * Warm sand substrate · Royal blue brand accent · Manrope+Cormorant type. * All consumer-facing UI reads from these tokens. * 2026-05-24 · v2.0 (de-fingerprint pass) * ───────────────────────────────────────────────────────────────────────── */ :root { /* ── SUBSTRATE — warm sand, not neutral gray (distinct from dojo's neutral) ── */ --oh-paper: oklch(96.2% 0.022 80); /* primary page background — warm sand */ --oh-paper-deep: oklch(93% 0.028 78); /* nested surfaces — deeper sand */ --oh-paper-warm: oklch(94% 0.034 62); /* golden sand alt */ /* ── INK SCALE (text, chrome, borders) ─────────────────────── */ --oh-ink: #15131D; /* primary text — slightly warmer than neutral black */ --oh-ink-2: #34303C; /* body text */ --oh-ink-3: #6F6878; /* muted / labels */ --oh-ink-4: #ACA4B0; /* very muted */ --oh-hair: rgba(21, 19, 29, 0.08); /* hairline borders */ --oh-hair-2: rgba(21, 19, 29, 0.14); /* stronger hairlines */ /* ── BRAND ACCENT (Olit blue · matches site-config §2) ─────── */ --oh-accent: #8a3ffc; /* primary CTA, link, brand chrome */ --oh-accent-deep: #6b1fd9; /* hover, pressed */ --oh-accent-soft: rgba(138,63,252,0.14); /* tinted backgrounds */ --oh-accent-ink: #FFFFFF; /* text on accent */ /* ── GLASS (panels — calmer than dojo's Vivid Atmosphere glass) ──── */ --oh-glass: rgba(255, 252, 244, 0.62); /* warm-tinted glass */ --oh-glass-deep: rgba(255, 252, 244, 0.82); --oh-glass-edge: rgba(255, 252, 244, 0.92); --oh-glass-blur: blur(28px) saturate(135%); --oh-glass-shadow: 0 1px 0 rgba(255,252,244,.95) inset, 0 14px 40px -16px rgba(8, 74, 243, 0.16), 0 2px 4px rgba(40, 30, 25, 0.06); /* ── DIFFUSE CHROMA (atmosphere only — never on chrome/CTAs) ─ */ --oh-c-rose: #FF3D7A; --oh-c-magenta: #E63CFF; --oh-c-lavender: #8A5DFF; --oh-c-sky: #1FA4FF; --oh-c-cyan: #25E4F0; --oh-c-mint: #4DEAA5; --oh-c-lime: #C2F23A; --oh-c-amber: #FFD11A; --oh-c-peach: #FF8533; /* ── FLAVOR FAMILY HUES (low-friction, sit on cream) ───────── */ --oh-f-iced: #6EC8FF; --oh-f-sour: #DCEB48; --oh-f-mint: #5EE0A0; --oh-f-tropical: #FF9244; --oh-f-berry: #FF4E94; --oh-f-peach: #FFB87A; --oh-f-sig: #BFB9AD; --oh-f-iced-deep: #1F5879; --oh-f-sour-deep: #565E0E; --oh-f-mint-deep: #1F5A3C; --oh-f-tropical-deep: #6D3608; --oh-f-berry-deep: #6E153D; --oh-f-peach-deep: #6E3F1C; --oh-f-sig-deep: #1A1812; /* ── SIGNAL (functional, never atmospheric) ─────────────────── */ --oh-signal-ok: #1F9D5C; /* in-stock dot · success toast */ --oh-signal-warn: #C97A1B; /* low-stock dot · pending */ --oh-signal-err: #C73B3B; /* OOS · warning callout · error */ --oh-signal-info: #1FA4FF; /* info callout */ /* ── TYPE STACKS — humanist serif display + geometric body + classical mono ── */ --oh-font-display: "Cormorant Garamond", "Newsreader", "GT Sectra", "Georgia", serif; --oh-font-body: "Manrope", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --oh-font-serif: "Cormorant Garamond", "Newsreader", "GT Sectra", "Georgia", serif; --oh-font-mono: "IBM Plex Mono", "Source Code Pro", ui-monospace, monospace; /* ── TYPE SCALE ────────────────────────────────────────────── */ --oh-fs-h1-xl: 110px; --oh-fs-h1: 76px; --oh-fs-h2: 44px; --oh-fs-h3: 28px; --oh-fs-h4: 20px; --oh-fs-lead: 18px; --oh-fs-body: 14px; --oh-fs-small: 12px; --oh-fs-micro: 11px; --oh-fs-mono-sm: 10px; /* ── LINE HEIGHTS ──────────────────────────────────────────── */ --oh-lh-tight: 1.02; --oh-lh-snug: 1.2; --oh-lh-body: 1.55; --oh-lh-loose: 1.7; /* ── TRACKING ──────────────────────────────────────────────── */ --oh-tr-display: -0.028em; --oh-tr-body: -0.005em; --oh-tr-mono: 0.06em; /* ── RADII — sharper card radii (lg/xl); pill capsule kept for legacy chips ─── */ --oh-r-xs: 4px; --oh-r-sm: 8px; --oh-r-md: 10px; --oh-r-lg: 14px; /* card radius — was 22 (Apple glass); now 14 (sharper) */ --oh-r-xl: 20px; --oh-r-pill: 999px; /* capsule — kept for legacy chip/stamp consumers */ --oh-r-chip: 8px; /* opt-in sharp chip for new chrome surfaces */ /* ── SPACING SCALE ─────────────────────────────────────────── */ --oh-s-1: 4px; --oh-s-2: 8px; --oh-s-3: 12px; --oh-s-4: 16px; --oh-s-5: 20px; --oh-s-6: 24px; --oh-s-8: 32px; --oh-s-10: 40px; --oh-s-12: 48px; --oh-s-16: 64px; --oh-s-20: 80px; /* ── LAYOUT WIDTHS ─────────────────────────────────────────── */ --oh-max-w: 1180px; /* slightly tighter than dojo 1200 */ --oh-max-w-nb: 920px; /* article/guide narrow body */ --oh-pad-x: 40px; /* desktop horizontal pad — tighter rhythm */ --oh-pad-x-md: 28px; /* tablet */ --oh-pad-x-sm: 18px; /* mobile */ /* ── ELEVATION (cards above atmosphere) ────────────────────── */ --oh-elev-1: 0 1px 2px rgba(14,17,22,.04); --oh-elev-2: 0 8px 24px -8px rgba(40,25,60,.10); --oh-elev-3: 0 24px 70px -20px rgba(80,30,100,.22); /* ── MOTION ────────────────────────────────────────────────── */ --oh-ease: cubic-bezier(.2, .8, .25, 1); --oh-ease-out: cubic-bezier(.16, 1, .3, 1); --oh-dur-fast: 120ms; --oh-dur-base: 200ms; --oh-dur-slow: 360ms; /* ── Z-LAYERS ──────────────────────────────────────────────── */ --oh-z-base: 0; --oh-z-sticky: 10; --oh-z-overlay: 20; --oh-z-modal: 40; --oh-z-toast: 60; } /* ── reset ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--oh-paper); color: var(--oh-ink); font: 420 var(--oh-fs-body) / var(--oh-lh-body) var(--oh-font-body); letter-spacing: var(--oh-tr-body); -webkit-font-smoothing: antialiased; } /* ── breakpoints (engineering reference) ───────────────────────── --oh-bp-sm: 375px · mobile baseline (70% of traffic) --oh-bp-md: 768px · tablet --oh-bp-lg: 1024px · desktop entry --oh-bp-xl: 1280px · canonical desktop --oh-bp-2xl: 1440px · large desktop */ /* ── motion notes (for engineering · §12 deliverable) ──────────── FAQ accordion → height transition 200ms var(--oh-ease-out) Sticky tab transitions → background-position 120ms ease-out Sticky cart pill → translateY(100% → 0) 240ms var(--oh-ease) on scrollPast hero Flavor card hover → translateY(-2px) 160ms; reveal note opacity 200ms Search modal entry → fade + scale 0.96→1 in 200ms Scratch-code reveal → SVG mask radial-gradient 600ms ease-out on pointer-drag */