/* Hallmark · macrostructure: Showcase (redesign, was Split-Editorial) · genre: editorial * theme: custom (vibe: "warm editorial authority, plain-spoken, one accent" * · paper oklch(97% 0.008 85) light-default · accent oklch(52% 0.150 55) warm-amber) * tone: editorial · design-system: design.md · designed-as-app * pre-emit critique: P5 H4 E5 S5 R5 V4 * redesign note: light is now the default palette (was dark-default); dark * moved to [data-theme="dark"], toggled via nav.js. See .hallmark/log.json. */ :root { /* ── colour — light default ────────────────────────────────────── */ --color-paper: oklch(97% 0.008 85); /* warm paper white — not cool #fff */ --color-paper-2: oklch(93% 0.010 80); --color-paper-3: oklch(88% 0.012 78); --color-ink: oklch(20% 0.012 60); --color-ink-2: oklch(40% 0.014 60); --color-ink-3: oklch(47% 0.012 60); --color-rule: oklch(85% 0.010 78); --color-accent: oklch(52% 0.150 55); /* warm amber, tuned for contrast on light paper */ --color-accent-dim: oklch(44% 0.120 55); --color-accent-ink: oklch(98% 0.006 85); --color-focus: oklch(52% 0.150 55); --color-terminal: oklch(42% 0.140 145); /* semantic success/fix green — case-study diffs & logs only */ --color-danger: oklch(55% 0.180 22); /* semantic rejected/error red — case-study arch blocks & diffs only */ /* ── typography ─────────────────────────────────────────────────── */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace; --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; /* ── type scale (major-third 1.25) ──────────────────────────────── */ --text-xs: 0.64rem; /* ~10px — short labels/badges only, never prose */ --text-sm: 0.80rem; /* ~13px */ --text-reading-sm: 0.875rem; /* 14px — reading-safe floor for small prose (arch notes, context lines) */ --text-base: 1.00rem; /* 16px */ --text-md: 1.25rem; /* 20px */ --text-lg: 1.5625rem; /* 25px */ --text-xl: 1.9531rem; /* 31px */ --text-2xl: 2.4414rem; /* 39px */ --text-3xl: 3.0518rem; /* 49px */ --text-4xl: 3.8147rem; /* 61px */ --text-display-s: clamp(2.25rem, 4vw + 0.75rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem); --text-stat: clamp(3.5rem, 7vw + 0.5rem, 6.5rem); /* ── spacing (4-pt scale) ────────────────────────────────────────── */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4.5rem; /* 72px */ --space-3xl: 7rem; /* 112px */ --space-4xl: 10rem; /* 160px — generous section-to-section rhythm */ /* ── motion ─────────────────────────────────────────────────────── */ --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.37, 0, 0.63, 1); --dur-short: 200ms; --dur-mid: 340ms; /* ── shape ───────────────────────────────────────────────────────── */ --radius-card: 4px; --radius-pill: 999px; --radius-input: 3px; /* ── rules ───────────────────────────────────────────────────────── */ --rule-hairline: 1px solid var(--color-rule); } /* ── dark mode — opt-in via toggle, no longer the default. Applied via [data-theme="dark"] on , set by nav.js. Falls back to system preference when no override is stored. ─────────────────────────── */ :root[data-theme="dark"] { --color-paper: oklch(15% 0.010 55); /* warm charcoal — not cool black */ --color-paper-2: oklch(20% 0.012 58); --color-paper-3: oklch(26% 0.014 58); --color-ink: oklch(94% 0.006 65); --color-ink-2: oklch(62% 0.014 62); --color-ink-3: oklch(60% 0.012 60); --color-rule: oklch(28% 0.014 58); --color-accent: oklch(74% 0.140 55); /* warm amber — brighter, needed for contrast on dark paper */ --color-accent-dim: oklch(62% 0.110 55); --color-accent-ink: oklch(12% 0.010 55); --color-focus: oklch(74% 0.140 55); --color-terminal: oklch(58% 0.150 145); --color-danger: oklch(65% 0.190 22); } @media (prefers-color-scheme: dark) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --color-paper: oklch(15% 0.010 55); --color-paper-2: oklch(20% 0.012 58); --color-paper-3: oklch(26% 0.014 58); --color-ink: oklch(94% 0.006 65); --color-ink-2: oklch(62% 0.014 62); --color-ink-3: oklch(60% 0.012 60); --color-rule: oklch(28% 0.014 58); --color-accent: oklch(74% 0.140 55); --color-accent-dim: oklch(62% 0.110 55); --color-accent-ink: oklch(12% 0.010 55); --color-focus: oklch(74% 0.140 55); --color-terminal: oklch(58% 0.150 145); --color-danger: oklch(65% 0.190 22); } }