/* ───────────────────────────────────────────────────────────────────────── * olithookalitvape.com · tokens.css — Direction D2 · Vivid Atmosphere * Engineering-ready CSS variables for 11ty + core.css rewrite. * All consumer-facing UI reads from these tokens. * 2026-05-15 · v1.0 * ───────────────────────────────────────────────────────────────────────── */ :root { /* ── SUBSTRATE ─────────────────────────────────────────────── */ --oh-paper: oklch(98% 0.008 70); /* primary page background */ --oh-paper-deep: oklch(95% 0.014 70); /* nested surfaces */ --oh-paper-warm: oklch(96% 0.018 65); /* warmer alt surface */ /* ── INK SCALE (text, chrome, borders) ─────────────────────── */ --oh-ink: #0E1116; /* primary text · chrome */ --oh-ink-2: #2F3239; /* body text */ --oh-ink-3: #6A6D76; /* muted / labels */ --oh-ink-4: #A6A9B1; /* very muted */ --oh-hair: rgba(14, 17, 22, 0.07); /* hairline borders */ --oh-hair-2: rgba(14, 17, 22, 0.13); /* stronger hairlines */ /* ── GLASS (cards, panels, sticky chrome) ──────────────────── */ --oh-glass: rgba(255, 255, 255, 0.50); --oh-glass-deep: rgba(255, 255, 255, 0.72); --oh-glass-edge: rgba(255, 255, 255, 0.85); --oh-glass-blur: blur(36px) saturate(150%); --oh-glass-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 24px 70px -20px rgba(80, 30, 100, 0.22), 0 2px 4px rgba(40, 25, 60, 0.05); /* ── 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 ───────────────────────────────────────────── */ --oh-font-display: "Bricolage Grotesque", "Outfit", system-ui, sans-serif; --oh-font-body: "Outfit", -apple-system, "Segoe UI", system-ui, sans-serif; --oh-font-serif: "Instrument Serif", "Newsreader", "GT Sectra", serif; --oh-font-mono: "JetBrains Mono", "IBM Plex Mono", 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 ─────────────────────────────────────────────────── */ --oh-r-xs: 6px; --oh-r-sm: 10px; --oh-r-md: 16px; --oh-r-lg: 22px; --oh-r-xl: 32px; --oh-r-pill: 999px; /* ── 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: 1200px; /* most pages */ --oh-max-w-nb: 920px; /* article/guide narrow body */ --oh-pad-x: 56px; /* desktop horizontal pad */ --oh-pad-x-md: 32px; /* tablet */ --oh-pad-x-sm: 20px; /* 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 */