/* ============================================================================= Compliance Publishing — Design Tokens Two directions, swappable via [data-theme="a" | "b"] on or a container. Direction A: Utility SaaS (quiet, enterprise, navy-forward) Direction B: Operational Industrial (cobalt + safety yellow, denser, sharper) ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&display=swap'); :root { /* ---------- Neutrals (shared by both directions) ---------- */ --neutral-0: oklch(100% 0 0); --neutral-50: oklch(98.5% 0.003 250); --neutral-100: oklch(96.5% 0.005 250); --neutral-150: oklch(94% 0.006 250); --neutral-200: oklch(91% 0.008 250); --neutral-300: oklch(85% 0.01 250); --neutral-400: oklch(72% 0.012 250); --neutral-500: oklch(58% 0.014 250); --neutral-600: oklch(46% 0.016 250); --neutral-700: oklch(36% 0.018 250); --neutral-800: oklch(24% 0.02 250); --neutral-900: oklch(16% 0.022 250); --neutral-950: oklch(10% 0.024 250); /* ---------- Semantic (shared) ---------- */ --success-500: oklch(62% 0.15 150); --success-600: oklch(54% 0.14 150); --success-50: oklch(96% 0.04 150); --warning-500: oklch(75% 0.14 80); --warning-600: oklch(65% 0.16 70); --warning-50: oklch(97% 0.05 85); --danger-500: oklch(60% 0.19 25); --danger-600: oklch(52% 0.2 25); --danger-50: oklch(96% 0.03 25); /* ---------- Spacing (8pt) ---------- */ --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-20: 80px; --sp-24: 96px; /* ---------- Type scale ---------- */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px; --fs-4xl: 44px; --fs-5xl: 60px; --fs-6xl: 80px; --lh-tight: 1.12; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --tr-tight: -0.02em; --tr-snug: -0.012em; --tr-normal: 0; --tr-wide: 0.06em; --tr-wider: 0.12em; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 120ms; --t-med: 220ms; --t-slow: 360ms; } /* ============================================================================= Direction A — Utility SaaS (default) Deep navy primary. Quiet, editorial-ish headlines with Source Serif italic accent for personality. Soft shadows, generous radii. ============================================================================= */ :root, [data-theme="a"] { /* Primary — deep trustworthy navy */ --brand-50: oklch(97% 0.02 255); --brand-100: oklch(93% 0.04 255); --brand-200: oklch(86% 0.07 255); --brand-300: oklch(76% 0.11 255); --brand-400: oklch(62% 0.15 255); --brand-500: oklch(48% 0.17 255); /* primary */ --brand-600: oklch(40% 0.16 256); --brand-700: oklch(32% 0.13 258); --brand-800: oklch(24% 0.09 260); --brand-900: oklch(17% 0.06 262); --brand-950: oklch(11% 0.04 264); /* Accent — quiet amber for highlights, not a shout */ --accent-500: oklch(74% 0.14 70); --accent-600: oklch(66% 0.15 60); /* Surface tokens */ --bg: var(--neutral-50); --bg-elevated: var(--neutral-0); --bg-sunken: var(--neutral-100); --bg-inverse: var(--brand-950); --fg: var(--neutral-900); --fg-muted: var(--neutral-600); --fg-subtle: var(--neutral-500); --fg-inverse: var(--neutral-0); --border: var(--neutral-200); --border-strong: var(--neutral-300); --border-focus: var(--brand-500); --primary: var(--brand-600); --primary-hover: var(--brand-700); --primary-fg: var(--neutral-0); /* Radii — rounded, soft */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* Shadows — soft, realistic */ --shadow-xs: 0 1px 2px 0 oklch(20% 0.03 260 / 0.05); --shadow-sm: 0 1px 3px 0 oklch(20% 0.03 260 / 0.08), 0 1px 2px -1px oklch(20% 0.03 260 / 0.06); --shadow-md: 0 4px 12px -2px oklch(20% 0.03 260 / 0.08), 0 2px 4px -2px oklch(20% 0.03 260 / 0.04); --shadow-lg: 0 12px 28px -8px oklch(20% 0.03 260 / 0.12), 0 4px 8px -4px oklch(20% 0.03 260 / 0.06); --shadow-xl: 0 28px 60px -16px oklch(20% 0.03 260 / 0.18); /* Typography */ --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-serif: 'Source Serif 4', Georgia, serif; --font-display: 'Geist', var(--font-sans); --font-accent: 'Source Serif 4', Georgia, serif; /* italic accents */ } /* ============================================================================= Direction B — Operational Industrial Cobalt blue + safety yellow accent (echoes Routeware). Mono numerals, tighter radii, sharper shadows, denser data feel. ============================================================================= */ [data-theme="b"] { /* Primary — punchy cobalt */ --brand-50: oklch(97% 0.025 240); --brand-100: oklch(92% 0.05 240); --brand-200: oklch(84% 0.1 240); --brand-300: oklch(72% 0.16 240); --brand-400: oklch(58% 0.2 240); --brand-500: oklch(48% 0.22 242); /* primary */ --brand-600: oklch(40% 0.21 244); --brand-700: oklch(32% 0.17 246); --brand-800: oklch(24% 0.12 248); --brand-900: oklch(16% 0.08 250); --brand-950: oklch(10% 0.05 252); /* Accent — safety yellow */ --accent-500: oklch(88% 0.17 95); --accent-600: oklch(82% 0.19 92); /* Surface — slightly cooler */ --bg: var(--neutral-100); --bg-elevated: var(--neutral-0); --bg-sunken: var(--neutral-150); --bg-inverse: var(--neutral-950); --fg: var(--neutral-950); --fg-muted: var(--neutral-600); --fg-subtle: var(--neutral-500); --fg-inverse: var(--neutral-0); --border: var(--neutral-200); --border-strong: var(--neutral-400); --border-focus: var(--brand-500); --primary: var(--brand-500); --primary-hover: var(--brand-600); --primary-fg: var(--neutral-0); /* Radii — sharper, more utilitarian */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* Shadows — tighter, more contrasty */ --shadow-xs: 0 1px 0 0 oklch(10% 0 0 / 0.06); --shadow-sm: 0 1px 2px 0 oklch(10% 0 0 / 0.12); --shadow-md: 0 2px 6px -1px oklch(10% 0 0 / 0.14); --shadow-lg: 0 8px 20px -6px oklch(10% 0 0 / 0.2); --shadow-xl: 0 20px 40px -12px oklch(10% 0 0 / 0.28); /* Typography — same sans, but mono for numerals */ --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-serif: 'Source Serif 4', Georgia, serif; --font-display: 'Geist', var(--font-sans); --font-accent: 'Geist Mono', var(--font-mono); /* mono-as-accent */ } /* ============================================================================= Base resets scoped to our demos ============================================================================= */ .cp-root { font-family: var(--font-sans); color: var(--fg); background: var(--bg); font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'ss01', 'cv11'; } .cp-root *, .cp-root *::before, .cp-root *::after { box-sizing: border-box; } /* Monospace numerals utility — handy in data UIs */ .cp-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Eyebrow label — tiny uppercase label used above headings */ .cp-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--fg-subtle); }