/* ochmański design tokens v0.3 — 2026-08-09 Framework-free CSS custom properties. Light is default; dark applies via prefers-color-scheme, or force either with . Contrast verified: body text >= 7:1 (AAA), UI/status text >= 4.5:1 (AA). */ :root { /* primitives */ --oc-latte-50: #fffdf6; --oc-latte-100: #fff8e7; /* cosmic latte — the average color of the universe */ --oc-latte-200: #f6ecd3; --oc-latte-300: #e9dcbd; --oc-plum-300: #d38fbe; --oc-plum-500: #8a2f6f; --oc-plum-600: #78275f; --oc-plum-700: #5b2049; --oc-plum-900: #400f33; /* the original ink */ --oc-space-800: #3d1631; --oc-space-900: #2a0e21; --oc-space-950: #1d0817; /* deep space */ --oc-font-sans: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif; --oc-font-mono: 'Ubuntu Mono', ui-monospace, 'Cascadia Mono', 'JetBrains Mono', monospace; --oc-text-xs: 0.8125rem; --oc-text-sm: 0.875rem; --oc-text-base: 1rem; --oc-text-lg: 1.25rem; --oc-text-xl: 1.5625rem; --oc-text-2xl: 1.953rem; --oc-text-3xl: 2.441rem; --oc-text-display: clamp(2.75rem, 7.2vw, 5.25rem); /* the 7.2vw headline, tamed */ --oc-leading-display: 1.05; --oc-leading-heading: 1.2; --oc-leading-body: 1.55; --oc-radius-sm: 3px; --oc-radius-md: 6px; --oc-radius-lg: 10px; --oc-radius-full: 999px; --oc-tilt: -6deg; /* the six-degree tilt */ --oc-ease: cubic-bezier(0.2, 0, 0, 1); --oc-fast: 120ms; --oc-slow: 240ms; /* semantic — light */ --oc-bg: var(--oc-latte-100); --oc-surface: var(--oc-latte-50); --oc-surface-sunken: var(--oc-latte-200); --oc-border: var(--oc-latte-300); --oc-ink: var(--oc-plum-900); /* headings, brand, emphasis */ --oc-text: var(--oc-plum-700); /* body — deliberately more violet than the ink */ --oc-text-muted: #7d5670; --oc-accent: var(--oc-plum-500); /* links, interactive */ --oc-accent-hover: var(--oc-plum-600); --oc-on-accent: var(--oc-latte-100); --oc-solid: var(--oc-plum-900); /* primary button surface */ --oc-on-solid: var(--oc-latte-100); --oc-focus: var(--oc-plum-500); --oc-ok: #22684b; --oc-ok-bg: #e8f0da; --oc-warn: #875408; --oc-warn-bg: #f9e9c6; --oc-err: #a31e42; --oc-err-bg: #fadfdc; --oc-shadow-sm: 0 1px 2px rgb(64 15 51 / 0.07); --oc-shadow-md: 0 2px 10px rgb(64 15 51 / 0.10); color-scheme: light dark; } /* semantic — dark */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --oc-bg: var(--oc-space-950); --oc-surface: var(--oc-space-900); --oc-surface-sunken: #150410; --oc-border: var(--oc-space-800); --oc-ink: var(--oc-latte-100); --oc-text: #efe0ce; --oc-text-muted: #c0a2b2; --oc-accent: var(--oc-plum-300); --oc-accent-hover: #dda3cb; --oc-on-accent: var(--oc-space-950); --oc-solid: var(--oc-latte-100); --oc-on-solid: var(--oc-plum-900); --oc-focus: var(--oc-plum-300); --oc-ok: #8fd0ae; --oc-ok-bg: #15301f; --oc-warn: #e0b163; --oc-warn-bg: #38290a; --oc-err: #f096a8; --oc-err-bg: #3d1020; --oc-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45); --oc-shadow-md: 0 2px 12px rgb(0 0 0 / 0.55); } } :root[data-theme="dark"] { --oc-bg: var(--oc-space-950); --oc-surface: var(--oc-space-900); --oc-surface-sunken: #150410; --oc-border: var(--oc-space-800); --oc-ink: var(--oc-latte-100); --oc-text: #efe0ce; --oc-text-muted: #c0a2b2; --oc-accent: var(--oc-plum-300); --oc-accent-hover: #dda3cb; --oc-on-accent: var(--oc-space-950); --oc-solid: var(--oc-latte-100); --oc-on-solid: var(--oc-plum-900); --oc-focus: var(--oc-plum-300); --oc-ok: #8fd0ae; --oc-ok-bg: #15301f; --oc-warn: #e0b163; --oc-warn-bg: #38290a; --oc-err: #f096a8; --oc-err-bg: #3d1020; --oc-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45); --oc-shadow-md: 0 2px 12px rgb(0 0 0 / 0.55); } /* opinionated base — optional, delete freely */ .oc-base { background: var(--oc-bg); color: var(--oc-text); font-family: var(--oc-font-sans); line-height: var(--oc-leading-body); -webkit-font-smoothing: antialiased; } .oc-base :is(h1, h2, h3, h4) { color: var(--oc-ink); font-weight: 400; /* hierarchy by size, not weight */ line-height: var(--oc-leading-heading); } .oc-base a { color: var(--oc-accent); } .oc-base a:hover { color: var(--oc-accent-hover); } .oc-base :focus-visible { outline: 2px solid var(--oc-focus); outline-offset: 2px; border-radius: var(--oc-radius-sm); } .oc-base ::selection { background: var(--oc-solid); color: var(--oc-on-solid); } @media (prefers-reduced-motion: reduce) { .oc-base *, .oc-base *::before, .oc-base *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }