/* Hallmark · design-system: design.md · designed-as-app * TrakX token system v2 — canonical source, every stylesheet in this project * consumes these by name. Never inline a raw OKLCH/hex value or font-family * outside this file — lift it into a token here instead. * theme: custom (tuned) · vibe: "industrial precision, control-room, cold-chain, * technical, dense-data" · axes: dark / mono / cool */ :root { /* ── Color — surfaces (dark paper — see design.md Theme) ─ */ --color-paper: oklch(14% 0.012 205); --color-paper-2: oklch(17% 0.013 205); --color-paper-3: oklch(20% 0.014 205); --color-ink: oklch(94% 0.008 205); --color-ink-2: oklch(74% 0.010 205); --color-ink-3: oklch(56% 0.010 205); --color-rule: oklch(30% 0.014 205); --color-rule-2: oklch(24% 0.013 205); /* ── Color — accent & signal ──────────────────────────── */ --color-accent: oklch(72% 0.15 205); --color-accent-hover: oklch(78% 0.15 205); --color-accent-soft: oklch(26% 0.05 205); --color-accent-ink: oklch(14% 0.020 205); --color-focus: oklch(75% 0.19 205); --color-danger: oklch(68% 0.19 25); --color-danger-soft: oklch(26% 0.07 25); --color-danger-ink: oklch(90% 0.04 25); --color-warning: oklch(78% 0.15 70); --color-warning-soft: oklch(28% 0.06 70); --color-warning-ink: oklch(90% 0.03 70); --color-success: oklch(72% 0.15 160); --color-success-soft: oklch(24% 0.06 160); --color-success-ink: oklch(88% 0.03 160); /* ── Color — icon-rail nav (deliberately not --color-ink — that token is the LIGHT foreground in this dark system) ── */ --color-rail: oklch(11% 0.012 205); --color-rail-ink: oklch(70% 0.014 205); /* ── Typography ────────────────────────────────────────── */ --font-display: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-md: 0.875rem; --text-lg: 1rem; --text-xl: 1.125rem; --text-2xl: 1.375rem; --text-display: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); --tracking-tight: -0.02em; --tracking-tighter: -0.04em; /* ── Spacing (4pt scale) ───────────────────────────────── */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; /* ── 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.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-short: 180ms; --dur-med: 280ms; /* ── Shape ─────────────────────────────────────────────── */ --radius-sm: 8px; --radius: 12px; --radius-pill: 999px; /* ── Shadow (used sparingly — utilitarian, not glossy; dark-paper shadows lean on near-black, not the ink token) ── */ --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.30); --shadow: 0 1px 3px oklch(0% 0 0 / 0.35), 0 1px 2px oklch(0% 0 0 / 0.25); --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.40); --shadow-lg: 0 12px 32px oklch(0% 0 0 / 0.55); /* ── App-shell dimensions ─────────────────────────────── */ --sidebar-w: 64px; --topbar-h: 56px; } /* ── Light theme override ───────────────────────────────── * Toggled via the [data-bs-theme] attribute on (site.js * TrakXTheme.toggle, persisted to localStorage — see App.razor's * inline pre-Blazor script for the flash-free initial read). * Same hue anchor (205) as dark, lightness/chroma flipped per * Hallmark's dark-mode recipe run in reverse. The icon-rail stays * dark in both themes on purpose — it's the instrument's control * column, not the data surface; see design.md Theme. */ :root[data-bs-theme="light"] { --color-paper: oklch(97% 0.006 205); --color-paper-2: oklch(99.2% 0.003 205); --color-paper-3: oklch(94.5% 0.008 205); --color-ink: oklch(20% 0.030 205); --color-ink-2: oklch(42% 0.020 205); --color-ink-3: oklch(58% 0.014 205); --color-rule: oklch(88% 0.012 205); --color-rule-2: oklch(92% 0.008 205); --color-accent: oklch(52% 0.17 205); --color-accent-hover: oklch(46% 0.17 205); --color-accent-soft: oklch(93% 0.035 205); --color-accent-ink: oklch(99% 0.004 205); --color-focus: oklch(52% 0.19 205); --color-danger: oklch(55% 0.19 25); --color-danger-soft: oklch(95% 0.035 20); --color-danger-ink: oklch(38% 0.14 25); --color-warning: oklch(58% 0.15 70); --color-warning-soft: oklch(96% 0.05 80); --color-warning-ink: oklch(42% 0.11 65); --color-success: oklch(52% 0.14 160); --color-success-soft: oklch(95% 0.045 155); --color-success-ink: oklch(33% 0.09 160); --shadow-sm: 0 1px 2px oklch(20% 0.03 205 / 0.06); --shadow: 0 1px 3px oklch(20% 0.03 205 / 0.07), 0 1px 2px oklch(20% 0.03 205 / 0.04); --shadow-md: 0 4px 12px oklch(20% 0.03 205 / 0.08); --shadow-lg: 0 12px 32px oklch(20% 0.03 205 / 0.16); }