/* Hallmark · tokens · PrintMesh * ───────────────────────────────────────────────────────────── * COLOUR COMBOS LIVE HERE AND NOWHERE ELSE. * Swap by setting data-theme on : * * Presets: coral · cobalt · forest · sand (active) · graphite · midnight * To add your own, copy any block below, rename the selector, keep * every token. Nothing outside this file holds a colour value. * Contrast: every --color-accent is >=4.5:1 on its own --color-paper; * --color-accent-soft is marks/rules only (>=3:1), never small text. * ───────────────────────────────────────────────────────────── */ /* ── Preset · Coral — warm grey paper, deep coral signal (default) ── */ :root, [data-theme="coral"] { --color-paper: oklch(97% 0.006 55); --color-paper-2: oklch(94.5% 0.008 55); --color-rule: oklch(88% 0.008 55); --color-rule-2: oklch(80% 0.010 55); --color-neutral: oklch(58% 0.010 50); --color-muted: oklch(45% 0.012 48); --color-ink: oklch(22% 0.012 45); --color-accent: oklch(47% 0.160 33); --color-accent-soft: oklch(64% 0.190 33); --color-accent-ink: oklch(99% 0.010 40); --color-focus: oklch(52% 0.190 33); --color-band: oklch(23% 0.022 45); --color-band-2: oklch(27% 0.024 45); --color-band-rule: oklch(37% 0.022 45); --color-band-ink: oklch(96% 0.008 60); --color-band-muted: oklch(75% 0.012 55); --color-band-accent: oklch(78% 0.150 45); --weight-body: 400; --shadow-whisper: 0 1px 2px oklch(22% 0.012 45 / 0.06); } /* ── Preset · Cobalt — cool engineered near-white, electric blue ── */ [data-theme="cobalt"] { --color-paper: oklch(98.5% 0.004 250); --color-paper-2: oklch(96% 0.006 250); --color-rule: oklch(89% 0.008 252); --color-rule-2: oklch(80% 0.010 252); --color-neutral: oklch(58% 0.014 256); --color-muted: oklch(45% 0.018 257); --color-ink: oklch(24% 0.020 258); --color-accent: oklch(48% 0.170 256); --color-accent-soft: oklch(58% 0.200 256); --color-accent-ink: oklch(99% 0.006 250); --color-focus: oklch(52% 0.190 256); --color-band: oklch(23% 0.030 258); --color-band-2: oklch(27% 0.032 258); --color-band-rule: oklch(37% 0.030 258); --color-band-ink: oklch(96% 0.006 250); --color-band-muted: oklch(76% 0.012 252); --color-band-accent: oklch(76% 0.160 250); --weight-body: 400; --shadow-whisper: 0 1px 2px oklch(24% 0.020 258 / 0.06); } /* ── Preset · Forest — bone paper, deep leaf green ── */ [data-theme="forest"] { --color-paper: oklch(97% 0.008 130); --color-paper-2: oklch(94% 0.010 130); --color-rule: oklch(87% 0.012 135); --color-rule-2: oklch(78% 0.014 135); --color-neutral: oklch(57% 0.014 140); --color-muted: oklch(44% 0.016 142); --color-ink: oklch(20% 0.015 145); --color-accent: oklch(45% 0.120 155); --color-accent-soft: oklch(60% 0.140 155); --color-accent-ink: oklch(98% 0.008 130); --color-focus: oklch(50% 0.140 155); --color-band: oklch(22% 0.030 150); --color-band-2: oklch(26% 0.032 150); --color-band-rule: oklch(36% 0.030 150); --color-band-ink: oklch(96% 0.010 130); --color-band-muted: oklch(75% 0.014 140); --color-band-accent: oklch(80% 0.150 150); --weight-body: 400; --shadow-whisper: 0 1px 2px oklch(20% 0.015 145 / 0.06); } /* ── Preset · Sand — warm oat paper, brick signal ── */ [data-theme="sand"] { --color-paper: oklch(96% 0.014 80); --color-paper-2: oklch(93% 0.018 80); --color-rule: oklch(86% 0.018 75); --color-rule-2: oklch(77% 0.020 72); --color-neutral: oklch(56% 0.016 65); --color-muted: oklch(43% 0.016 60); --color-ink: oklch(20% 0.014 58); --color-accent: oklch(46% 0.150 40); --color-accent-soft: oklch(62% 0.170 40); --color-accent-ink: oklch(98% 0.012 80); --color-focus: oklch(51% 0.170 40); --color-band: oklch(22% 0.026 55); --color-band-2: oklch(26% 0.028 55); --color-band-rule: oklch(36% 0.026 55); --color-band-ink: oklch(96% 0.012 80); --color-band-muted: oklch(76% 0.014 65); --color-band-accent: oklch(80% 0.150 55); --weight-body: 400; --shadow-whisper: 0 1px 2px oklch(20% 0.014 58 / 0.07); } /* ── Preset · Graphite — dark warm neutral, amber signal ── */ [data-theme="graphite"] { --color-paper: oklch(16% 0.008 60); --color-paper-2: oklch(20% 0.009 60); --color-rule: oklch(30% 0.010 60); --color-rule-2: oklch(38% 0.011 60); --color-neutral: oklch(62% 0.010 60); --color-muted: oklch(74% 0.010 60); --color-ink: oklch(94% 0.006 70); --color-accent: oklch(78% 0.140 65); --color-accent-soft: oklch(68% 0.150 60); --color-accent-ink: oklch(18% 0.012 60); --color-focus: oklch(80% 0.140 65); --color-band: oklch(10% 0.008 60); --color-band-2: oklch(14% 0.009 60); --color-band-rule: oklch(25% 0.010 60); --color-band-ink: oklch(95% 0.006 70); --color-band-muted: oklch(73% 0.010 60); --color-band-accent: oklch(80% 0.140 65); --weight-body: 350; --shadow-whisper: 0 1px 2px oklch(8% 0.008 60 / 0.40); } /* ── Preset · Midnight — deep blue paper, warm amber signal ── */ [data-theme="midnight"] { --color-paper: oklch(17% 0.020 265); --color-paper-2: oklch(21% 0.024 265); --color-rule: oklch(31% 0.022 265); --color-rule-2: oklch(39% 0.024 265); --color-neutral: oklch(63% 0.018 265); --color-muted: oklch(75% 0.014 265); --color-ink: oklch(93% 0.008 265); --color-accent: oklch(79% 0.130 85); --color-accent-soft: oklch(69% 0.140 80); --color-accent-ink: oklch(19% 0.020 265); --color-focus: oklch(81% 0.130 85); --color-band: oklch(11% 0.022 265); --color-band-2: oklch(15% 0.024 265); --color-band-rule: oklch(26% 0.022 265); --color-band-ink: oklch(94% 0.008 265); --color-band-muted: oklch(74% 0.014 265); --color-band-accent: oklch(81% 0.130 85); --weight-body: 350; --shadow-whisper: 0 1px 2px oklch(8% 0.020 265 / 0.45); } /* ── Material swatches — physical filament colours, preset-independent ── */ :root { --mat-pla: oklch(72% 0.150 250); --mat-petg: oklch(74% 0.140 165); --mat-abs: oklch(66% 0.140 30); --mat-tpu: oklch(78% 0.150 90); --mat-resin: oklch(68% 0.130 310); } /* ── Blueprint ground — derived, so it follows the active preset ── */ :root { --grid-line: color-mix(in oklab, var(--color-ink) 5%, transparent); --grid-line-strong: color-mix(in oklab, var(--color-ink) 8%, transparent); --grid-size: 48px; --grid-size-panel: 24px; --mask-on: oklch(0% 0 0); --mask-off: oklch(0% 0 0 / 0); } /* ── Type, space, motion — shared by every preset ───────────────── */ :root { --font-display: "Cabinet Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: "Switzer", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-display-s: clamp(2rem, 3.4vw + 0.75rem, 3.25rem); --text-display: clamp(2.5rem, 4.6vw + 0.9rem, 4.5rem); --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; --rule-hair: 1px; --radius-sm: 6px; --radius-md: 10px; --dur-short: 120ms; --dur-mid: 240ms; --dur-long: 600ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --z-base: 1; --z-raised: 10; --z-sticky: 200; }