/* onz design tokens — single source of truth (see DESIGN.md). Authored in OKLCH; sampled from real WithJoy / FindTheSeat captures. */ :root { /* ----- color ----- Cool modern white: a clean cool off-white surface, cool near-black ink, and one confident coral/persimmon accent. (Moved off the old WithJoy warm cream.) Event photos provide the colour; the chrome stays quiet. Template moods (film/airy/editorial) override these per event. The token names --plum/--green are kept (many components reference them) but carry the accent (coral) and the semantic-success (muted sage) roles. DESIGN.md/README/PRODUCT mirror these. (--surface-warm name retained for compatibility; its value is now a cool fill.) */ --canvas: oklch(0.991 0.003 255); /* cool off-white canvas */ --surface: oklch(0.998 0.0015 255); /* near-white cool panel */ --surface-warm: oklch(0.967 0.004 255); /* cool light fill (inputs, blocks) */ --ink: oklch(0.200 0.010 262); /* cool near-black */ --ink-strong: oklch(0.150 0.010 262); --ink-muted: oklch(0.520 0.012 258); --line: oklch(0.910 0.004 258); --display: oklch(0.175 0.010 262); /* default display = ink (templates override) */ --green: oklch(0.560 0.055 158); /* muted sage — SUCCESS states only */ --green-ink: oklch(0.470 0.058 158); --green-tint: oklch(0.955 0.022 158); --plum: oklch(0.645 0.170 40); /* coral / persimmon — THE accent */ --plum-tint: oklch(0.952 0.040 46); --danger: oklch(0.555 0.190 27); --danger-tint: oklch(0.955 0.035 27); --white: oklch(0.998 0.0015 255); /* semantic */ --bg: var(--canvas); --text: var(--ink); --text-muted: var(--ink-muted); --primary: var(--plum); /* coral primary actions */ --primary-press: oklch(0.575 0.175 38); --accent: var(--plum); --focus: var(--plum); /* ----- type ----- */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; /* editorial serif */ --font-grotesque: "Archivo", "Schibsted Grotesk", system-ui, sans-serif; /* brand/poster display */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; /* date-stamp / counter */ /* The slot-machine animation reads this list (see effects.css / Wordmark.mjs). */ --font-template-default: var(--font-display); --fs-display: clamp(2.5rem, 7vw, 4.5rem); --fs-h1: clamp(2rem, 4vw, 3rem); --fs-h2: 1.5rem; --fs-h3: 1.25rem; --fs-body: 1rem; --fs-sm: 0.875rem; --fs-label: 0.78rem; --fs-counter: clamp(3rem, 12vw, 6rem); --lh-body: 1.6; --lh-tight: 1.15; --tracking-label: 0.14em; /* ----- spacing ----- 4px modular scale: use small steps for controls, larger steps for page rhythm. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px; /* ----- shape ----- */ --r-sm: 6px; --r-lg: 20px; --r-pill: 999px; --r-card: 14px; --r-input: var(--r-card); --r-photo: var(--r-sm); --r-surface: var(--r-lg); /* large radius for full-bleed photo cards (Apple-Invites) */ --border: 1px solid var(--line); --shadow: none; --ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--focus); /* ----- depth (floating elements only; warm, <=6% opacity) ----- */ --elev-1: 0 1px 2px oklch(0.220 0.025 55 / 0.04); --elev-2: 0 10px 30px oklch(0.220 0.025 55 / 0.05); --elev-3: 0 18px 48px oklch(0.220 0.025 55 / 0.06); --elev-photo: 0 24px 60px oklch(0.180 0.020 55 / 0.06); /* full-bleed cards on dark */ --elev-float: 0 24px 60px rgba(0, 0, 0, 0.28); /* floating photo/lightbox cards */ /* per-event accent sampled from the hero photo (colorthief writes these). */ --accent-photo: var(--plum); --accent-photo-ink: var(--white); /* ----- motion ----- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */ --dur-fast: 150ms; --dur: 220ms; --dur-reveal: 520ms; /* ----- z-scale ----- */ --z-nav: 100; --z-sticky: 200; --z-backdrop: 900; --z-modal: 1000; --z-toast: 1100; --maxw-prose: 68ch; --maxw-content: 1100px; --tabbar-h: var(--sp-16); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-reveal: 1ms; } } /* ========================================================================= Template moods — opt-in per event via [data-theme] on the page root. These override the semantic neutrals + accent; the default (no attribute) is the warm-editorial theme above. Differentiates onz from a single "wedding" look (see DESIGN.md / research/aesthetic-trends.md). ========================================================================= */ /* Film / Analog — Portra-warm, lifted brown-black ink, terracotta accent */ [data-theme="film"] { --canvas: oklch(0.954 0.013 78); --surface: oklch(0.974 0.011 80); --surface-warm: oklch(0.935 0.018 72); --ink: oklch(0.300 0.016 50); --ink-strong: oklch(0.235 0.016 50); --ink-muted: oklch(0.535 0.022 52); --line: oklch(0.865 0.016 70); --display: oklch(0.520 0.090 45); --plum: oklch(0.620 0.115 52); /* terracotta as the accent */ --plum-tint: oklch(0.930 0.030 60); --green: oklch(0.520 0.075 150); --green-ink: oklch(0.440 0.070 150); --green-tint: oklch(0.940 0.022 150); --accent: var(--plum); --focus: var(--plum); --primary: var(--plum); --font-display: "Newsreader", Georgia, serif; } /* Korean-Airy — bright cool-soft, gentle low-contrast ink, muted pastels */ [data-theme="airy"] { --canvas: oklch(0.984 0.004 95); --surface: oklch(0.995 0.003 95); --surface-warm: oklch(0.955 0.010 240); --ink: oklch(0.360 0.012 250); --ink-strong: oklch(0.300 0.012 250); --ink-muted: oklch(0.560 0.012 250); --line: oklch(0.918 0.008 250); --display: oklch(0.560 0.075 42); --plum: oklch(0.660 0.120 42); /* soft coral accent (was lavender — no purple) */ --plum-tint: oklch(0.952 0.030 45); --green: oklch(0.600 0.060 165); --green-ink: oklch(0.500 0.060 165); --green-tint: oklch(0.945 0.022 165); --accent: var(--plum); --focus: var(--plum); --primary: var(--plum); --font-display: "Plus Jakarta Sans", system-ui, sans-serif; } /* A24-Editorial — bone paper, near-black warm ink, dusty oxblood accent */ [data-theme="editorial"] { --canvas: oklch(0.965 0.003 95); --surface: oklch(0.986 0.002 95); --surface-warm: oklch(0.928 0.004 90); --ink: oklch(0.185 0.005 75); --ink-strong: oklch(0.140 0.005 75); --ink-muted: oklch(0.480 0.008 75); --line: oklch(0.860 0.005 90); --display: oklch(0.185 0.005 75); /* near-black display, not mauve */ --plum: oklch(0.470 0.110 28); /* dusty oxblood */ --plum-tint: oklch(0.930 0.030 28); --green: oklch(0.430 0.060 150); --green-ink: oklch(0.360 0.055 150); --green-tint: oklch(0.935 0.018 150); --accent: var(--plum); --focus: var(--plum); --primary: var(--plum); --font-display: "Archivo", system-ui, sans-serif; } /* Modern-Cool — crisp cool-white, cool near-black ink, a slate-blue accent (no purple). The cool counterpart to the warm moods; default brand stays coral. */ [data-theme="modern"] { --canvas: oklch(0.992 0.003 250); --surface: oklch(0.999 0.001 250); --surface-warm: oklch(0.965 0.005 250); --ink: oklch(0.190 0.012 258); --ink-strong: oklch(0.140 0.012 258); --ink-muted: oklch(0.515 0.014 255); --line: oklch(0.908 0.006 255); --display: oklch(0.180 0.012 258); --plum: oklch(0.560 0.095 248); /* slate-blue accent — cool, never purple */ --plum-tint: oklch(0.945 0.028 250); --green: oklch(0.560 0.055 158); --green-ink: oklch(0.470 0.058 158); --green-tint: oklch(0.955 0.022 158); --accent: var(--plum); --focus: var(--plum); --primary: var(--plum); --font-display: "Archivo", system-ui, sans-serif; }