/* ────────────────────────────────────────────────────────────────────────── * PrijsProfeet — Design Tokens v1.0 * Express as CSS Custom Properties. Vanilla. No framework. No build step. * Mobile-first. WCAG 2.1 AA. Dutch UI. * ──────────────────────────────────────────────────────────────────────── */ :root { /* ── Color · Brand "Profeet" ─────────────────────────────────────────── */ /* Midnight indigo. The calm-seer brand voice. Used for primary CTAs, * brand surfaces, "wisdom" moments (promo labels, hero numbers). */ --pp-brand-50: oklch(97% 0.012 270); --pp-brand-100: oklch(94% 0.022 270); --pp-brand-200: oklch(88% 0.045 270); --pp-brand-300: oklch(78% 0.075 270); --pp-brand-400: oklch(65% 0.105 270); --pp-brand-500: oklch(52% 0.130 270); --pp-brand-600: oklch(42% 0.130 270); /* default brand */ --pp-brand-700: oklch(33% 0.110 270); --pp-brand-800: oklch(25% 0.090 270); --pp-brand-900: oklch(18% 0.070 270); --pp-brand-950: oklch(12% 0.050 270); /* ── Color · Savings (price-down) — Signal Teal ─────────────────────── */ /* Deliberately NOT generic green. Distinct from PLUS/Ekoplaza brand * greens AND from semantic success. Owned, recognisable, calm. */ --pp-save-50: oklch(96% 0.020 195); --pp-save-100: oklch(92% 0.035 195); --pp-save-200: oklch(84% 0.065 195); --pp-save-300: oklch(74% 0.095 195); --pp-save-400: oklch(64% 0.120 195); --pp-save-500: oklch(56% 0.125 195); --pp-save-600: oklch(46% 0.110 195); /* default savings */ --pp-save-700: oklch(36% 0.090 195); --pp-save-800: oklch(28% 0.070 195); /* ── Color · Caution (price-up) — Saffron ───────────────────────────── */ --pp-rise-50: oklch(97% 0.020 80); --pp-rise-100: oklch(94% 0.040 80); --pp-rise-300: oklch(80% 0.110 75); --pp-rise-500: oklch(70% 0.135 70); --pp-rise-600: oklch(60% 0.140 65); --pp-rise-700: oklch(48% 0.120 55); /* ── Color · Error — reserved for *errors only* (not price-rise) ────── */ --pp-error-50: oklch(96% 0.020 25); --pp-error-100: oklch(92% 0.040 25); --pp-error-500: oklch(60% 0.180 25); --pp-error-600: oklch(52% 0.200 25); --pp-error-700: oklch(42% 0.180 25); /* ── Color · Info — for neutral informational moments ────────────────── */ --pp-info-100: oklch(94% 0.030 240); --pp-info-500: oklch(58% 0.130 240); --pp-info-700: oklch(42% 0.110 240); /* ── Color · Neutrals — warm paper greys ─────────────────────────────── */ /* Hue 80 = warm. Chroma kept <0.013 so it never fights a retailer brand. */ --pp-paper: oklch(98.5% 0.005 80); /* page bg */ --pp-cream: oklch(96.5% 0.008 80); /* alt surface, cards on paper */ --pp-n-50: oklch(97% 0.006 80); --pp-n-100: oklch(94% 0.008 80); --pp-n-200: oklch(88% 0.010 80); --pp-n-300: oklch(80% 0.012 80); --pp-n-400: oklch(67% 0.013 80); --pp-n-500: oklch(55% 0.013 80); --pp-n-600: oklch(44% 0.012 80); --pp-n-700: oklch(34% 0.012 80); --pp-n-800: oklch(25% 0.010 80); --pp-n-900: oklch(18% 0.008 80); --pp-ink: oklch(15% 0.008 80); /* primary text */ /* ── Semantic surface roles ─────────────────────────────────────────── */ --pp-bg: var(--pp-paper); --pp-bg-elevated: oklch(100% 0 0); --pp-bg-sunken: var(--pp-cream); --pp-border-soft: var(--pp-n-200); --pp-border: var(--pp-n-300); --pp-border-strong:var(--pp-n-400); --pp-text: var(--pp-ink); --pp-text-muted: var(--pp-n-600); --pp-text-subtle: var(--pp-n-500); /* ── Price semantic roles (use these, not the raw ramps) ─────────────── */ --pp-price-down-bg: var(--pp-save-100); --pp-price-down-bg-strong: var(--pp-save-600); --pp-price-down-text: var(--pp-save-700); --pp-price-down-on-strong: oklch(100% 0 0); --pp-price-up-bg: var(--pp-rise-100); --pp-price-up-text: var(--pp-rise-700); --pp-promo-bg: var(--pp-brand-800); /* "1+1 gratis", "2e halve prijs" */ --pp-promo-text: oklch(100% 0 0); /* ── Typography · families ──────────────────────────────────────────── */ --pp-font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif; --pp-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif; --pp-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Prices: Plex Sans with tabular figures on. */ --pp-font-price: "IBM Plex Sans", -apple-system, sans-serif; --pp-feat-tnum: "tnum" 1, "lnum" 1; /* ── Typography · scale (mobile-first; px) ──────────────────────────── */ --pp-fs-display-l: 56px; --pp-lh-display-l: 1.02; --pp-fs-display: 40px; --pp-lh-display: 1.05; --pp-fs-h1: 28px; --pp-lh-h1: 1.15; --pp-fs-h2: 22px; --pp-lh-h2: 1.20; --pp-fs-h3: 18px; --pp-lh-h3: 1.30; --pp-fs-body: 16px; --pp-lh-body: 1.45; --pp-fs-body-sm: 14px; --pp-lh-body-sm: 1.40; --pp-fs-caption: 13px; --pp-lh-caption: 1.30; --pp-fs-micro: 11px; --pp-lh-micro: 1.25; /* Price-specific scale (tabular) */ --pp-fs-price-xl: 34px; --pp-lh-price-xl: 1.0; /* hero price */ --pp-fs-price-l: 24px; --pp-lh-price-l: 1.0; /* card hero */ --pp-fs-price-m: 18px; --pp-lh-price-m: 1.0; /* row price */ --pp-fs-price-s: 15px; --pp-lh-price-s: 1.0; /* compact row */ /* ── Spacing · 4px base ──────────────────────────────────────────────── */ --pp-s-0: 0; --pp-s-1: 4px; --pp-s-2: 8px; --pp-s-3: 12px; --pp-s-4: 16px; --pp-s-5: 20px; --pp-s-6: 24px; --pp-s-8: 32px; --pp-s-10: 40px; --pp-s-12: 48px; --pp-s-16: 64px; --pp-s-20: 80px; /* ── Radius — restrained; tighter than current 12-24 ─────────────────── */ --pp-r-xs: 4px; /* chips, dietary tags */ --pp-r-sm: 8px; /* small cards, buttons */ --pp-r-md: 12px; /* product cards */ --pp-r-lg: 16px; /* sheets, large surfaces */ --pp-r-pill: 999px; /* ── Elevation — paper-light, three steps only ───────────────────────── */ --pp-e-0: none; --pp-e-1: 0 1px 2px oklch(15% 0.008 80 / 0.05), 0 0 0 1px oklch(15% 0.008 80 / 0.04); --pp-e-2: 0 2px 4px oklch(15% 0.008 80 / 0.06), 0 6px 16px oklch(15% 0.008 80 / 0.06); --pp-e-3: 0 8px 24px oklch(15% 0.008 80 / 0.10), 0 24px 48px oklch(15% 0.008 80 / 0.08); /* ── Motion ─────────────────────────────────────────────────────────── */ --pp-dur-1: 120ms; /* state feedback (hover/press) */ --pp-dur-2: 220ms; /* sheets, chips, toggles */ --pp-dur-3: 320ms; /* large reveals */ --pp-ease-out: cubic-bezier(.2,.7,.3,1); --pp-ease-in-out: cubic-bezier(.45,.05,.30,.95); --pp-ease-spring: cubic-bezier(.34,1.56,.64,1); /* ── Focus ring — always visible, never disabled ─────────────────────── */ --pp-focus-ring: 0 0 0 2px var(--pp-bg), 0 0 0 4px var(--pp-brand-600); /* ── Touch targets ──────────────────────────────────────────────────── */ --pp-touch-min: 44px; /* ── Breakpoints (consumed via @media; reference only) ───────────────── */ --pp-bp-sm: 480px; --pp-bp-md: 720px; --pp-bp-lg: 1024px; --pp-bp-xl: 1280px; } /* Dark mode is deliberately out of scope for v1. Tokens above are all * light-mode. Add a :root[data-theme="dark"] block later if/when needed. */