/* ===================================================================== * tokens.css — Single source of truth for design tokens. * * Loaded BEFORE every other stylesheet. * Do not redefine these values in component CSS. If you need a value * that isn't here, add it as a token first, then use it. * * Format: oklch() for all colors. Hex only where specifically called out * (Vipps brand orange and accent blue — fixed brand colors, not tokens). * ===================================================================== */ :root { /* ---------- Color: surfaces ---------- */ --f3d-bg-base: oklch(0.99 0.003 80); /* warm off-white — page background */ --f3d-bg-cream: oklch(0.96 0.005 250); /* slightly cooler — section backgrounds, sidebars */ --f3d-bg-warm: oklch(0.95 0.005 250); /* form fields, locked toggles */ --f3d-bg-paper: oklch(0.93 0.01 80); /* product image placeholders */ --f3d-bg-dark: oklch(0.18 0.01 260); /* footer, primary buttons */ --f3d-bg-darker: oklch(0.15 0.01 260); /* hover state on dark surfaces */ /* ---------- Color: ink (text) ---------- * * Hue locked to 260 (cool blue-grey) and chroma reduced to 0.005 so these * neutrals don't pick up a warm pink/brown cast against the warm-cream * page background. (Visual contrast against an oklch(_ _ 80) surface * pushes any chroma at 250 toward magenta — keeping chroma tight kills it.) * Verified to hold ≥4.5:1 on --f3d-bg-base for body and ≥3:1 for large. */ --f3d-ink-primary: oklch(0.18 0.01 260); /* headings, primary text */ --f3d-ink-body: oklch(0.2 0.01 260); /* body text */ --f3d-ink-muted: oklch(0.3 0.005 260); /* secondary text */ --f3d-ink-soft: oklch(0.4 0.005 260); /* descriptions, ledes */ --f3d-ink-faint: oklch(0.5 0.005 260); /* eyebrows, meta labels */ --f3d-ink-fainter: oklch(0.55 0.005 260); /* footer secondary text — darkened from 0.65 to keep AA on cream if reused */ --f3d-ink-on-dark: oklch(0.85 0.005 250); /* text on dark surfaces */ /* ---------- Color: borders & rules ---------- */ --f3d-rule-strong: oklch(0.85 0.005 260); /* card borders, button outlines */ --f3d-rule: oklch(0.88 0.005 260); /* default rule */ --f3d-rule-soft: oklch(0.92 0.005 260); /* nav border, table rows */ --f3d-rule-faint: oklch(0.94 0.005 260); /* dividers inside subtle blocks */ --f3d-rule-on-dark: oklch(0.28 0.01 260); /* footer rule */ /* ---------- Color: brand accents ---------- * Hex (not oklch) by intent — these are locked brand values, not tokens * to be derived from. Don't "convert" them. */ --f3d-accent: #2F80ED; /* primary CTA, italic emphasis, STL badge text */ --f3d-accent-ink: #ffffff; /* text on --f3d-accent */ --f3d-vipps: #FF5B24; /* Vipps orange — only on Vipps CTAs */ --f3d-vipps-ink: #ffffff; /* ---------- Color: status ---------- */ --f3d-success: oklch(0.55 0.13 145); --f3d-warning: oklch(0.7 0.15 70); --f3d-error: oklch(0.55 0.18 25); /* ---------- Focus ring ---------- * Single canonical focus indicator. Always 3px outer ring, derived from * the accent colour at 40% opacity so it works on any surface. * Use as `box-shadow: var(--f3d-focus-ring)` on :focus-visible. */ --f3d-focus-ring: 0 0 0 3px color-mix(in oklab, #2F80ED 40%, transparent); --f3d-focus-ring-inset: inset 0 0 0 2px #2F80ED; /* ---------- Type: families ---------- */ --f3d-font-display: 'Geist', 'Inter', sans-serif; /* H1, H2, H3 (light/regular weights) */ --f3d-font-body: 'Inter', sans-serif; /* body, UI */ --f3d-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* eyebrows, meta, prices, tabular */ /* ---------- Type: sizes ---------- */ --f3d-fs-display-xl: 62px; /* hero H1 */ --f3d-fs-display-l: 56px; /* checkout confirm */ --f3d-fs-display-m: 44px; /* section H2 */ --f3d-fs-display-s: 38px; /* sub-section H3 */ --f3d-fs-h-xl: 32px; /* page title */ --f3d-fs-h-l: 26px; /* card title large, maker quote */ --f3d-fs-h-m: 22px; /* dialog H3 */ --f3d-fs-h-s: 18px; /* summary total, sub-heads */ --f3d-fs-lede: 17px; /* hero lede */ --f3d-fs-body-l: 16px; /* large body */ --f3d-fs-body: 15px; /* default body */ --f3d-fs-ui: 14px; /* buttons, links, table cells */ --f3d-fs-meta: 13px; /* nav, secondary UI */ --f3d-fs-fine: 12px; /* fine print, tag pills */ --f3d-fs-eye: 11px; /* eyebrow labels — mono */ --f3d-fs-eye-s: 10px; /* smallest eyebrow */ /* ---------- Type: weights ---------- */ --f3d-fw-light: 300; --f3d-fw-regular: 400; --f3d-fw-medium: 500; --f3d-fw-semibold: 600; /* ---------- Type: line-heights ---------- */ --f3d-lh-display: 1.05; --f3d-lh-tight: 1.2; --f3d-lh-snug: 1.4; --f3d-lh-normal: 1.55; --f3d-lh-relaxed: 1.65; --f3d-lh-loose: 1.7; /* ---------- Type: letter-spacing ---------- */ --f3d-ls-display: -0.02em; /* large display text */ --f3d-ls-tight: -0.015em; /* mid display */ --f3d-ls-normal: 0; --f3d-ls-loose: 0.05em; --f3d-ls-eye: 0.08em; /* eyebrow / mono labels */ --f3d-ls-eye-loose: 0.1em; /* most-emphasized eyebrows */ --f3d-ls-caps: 0.12em; /* tightest tracking on caps */ /* ---------- Spacing scale (4 / 8px base) ---------- */ --f3d-sp-1: 4px; --f3d-sp-2: 8px; --f3d-sp-3: 12px; --f3d-sp-4: 16px; --f3d-sp-5: 20px; --f3d-sp-6: 24px; --f3d-sp-7: 28px; --f3d-sp-8: 32px; --f3d-sp-10: 40px; --f3d-sp-12: 48px; --f3d-sp-14: 56px; --f3d-sp-16: 64px; --f3d-sp-20: 80px; --f3d-sp-22: 88px; /* added — for section rhythm variants */ --f3d-sp-24: 100px; /* alias for --f3d-section-gap */ --f3d-sp-28: 112px; /* added — generous section gap */ /* ---------- Layout ---------- */ --f3d-page-pad-x: 56px; /* desktop horizontal page padding */ --f3d-page-pad-x-md: 32px; /* tablet */ --f3d-page-pad-x-sm: 20px; /* mobile */ --f3d-content-max: 1280px; /* canonical content width on desktop */ --f3d-prose-max: 640px; /* prose / lede max width */ --f3d-section-gap: 100px; /* gap between major sections */ --f3d-section-gap-sm: 60px; /* mobile section gap */ /* ---------- Radius ---------- */ --f3d-radius-none: 0; --f3d-radius-sm: 3px; /* tag pills, small chips */ --f3d-radius: 6px; /* inputs, default */ --f3d-radius-md: 8px; /* dialogs */ --f3d-radius-img: 12px; /* nested image panel inside cards */ --f3d-radius-card: 16px; /* outer card chrome */ --f3d-radius-pill: 999px; /* fully rounded — buttons, chips */ /* ---------- Shadow ---------- */ --f3d-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.06); --f3d-shadow: 0 2px 6px oklch(0 0 0 / 0.04), 0 12px 40px oklch(0 0 0 / 0.08); --f3d-shadow-lg: 0 8px 24px oklch(0 0 0 / 0.08), 0 24px 60px oklch(0 0 0 / 0.12); /* ---------- Motion ---------- */ --f3d-easing: cubic-bezier(0.2, 0.0, 0.0, 1); --f3d-dur-fast: 120ms; --f3d-dur: 200ms; --f3d-dur-slow: 320ms; /* ---------- Z-index ---------- */ --f3d-z-header: 40; --f3d-z-drawer: 60; --f3d-z-cookie: 70; --f3d-z-toast: 80; --f3d-z-modal: 90; } /* ---------- Breakpoints (use in @media) ---------- We don't expose breakpoints as custom properties because @media doesn't read them. Treat these as the canonical values throughout the codebase: --bp-sm: 480px (small phones — content reflow point) --bp-md: 768px (tablet portrait) --bp-lg: 1024px (tablet landscape / small laptop) --bp-xl: 1280px (desktop) Use mobile-first: write base styles for ≤sm, then layer up. ----------------------------------------------- */