/* Calibrate Freight — Deep Space design tokens. Deep-space violet base, aligned to the Calibrate brand: ink #151024, Calibrate violet oklch(0.54 0.26 293). Type: Mustica Pro / Plus Jakarta Sans / Pakenham. */ :root { color-scheme: dark; /* Core palette (oklch, matches the app) */ --bg: #151024; --bg-2: #0d0a17; --card: oklch(0.2 0.032 282); --card-2: oklch(0.23 0.034 282); --field: oklch(0.24 0.035 282); --fg: oklch(0.96 0.008 270); --dim: oklch(0.72 0.025 275); --dimmer: oklch(0.6 0.025 275); --brand: oklch(0.54 0.26 293); --brand-hi: oklch(0.702 0.183 293.54); --brand-hov: oklch(0.491 0.27 292.58); --brand-soft: color-mix(in oklch, var(--brand) 42%, var(--bg)); --line: oklch(0.32 0.035 282); --line-soft: oklch(0.26 0.03 282); --good: oklch(0.75 0.17 160); --warn: oklch(0.8 0.16 85); --bad: oklch(0.68 0.21 25); /* Alpha helpers */ --brand-a12: color-mix(in oklch, var(--brand) 12%, transparent); --brand-a20: color-mix(in oklch, var(--brand) 20%, transparent); --brand-a30: color-mix(in oklch, var(--brand) 30%, transparent); --good-a15: oklch(0.75 0.17 160 / 0.15); --warn-a15: oklch(0.8 0.16 85 / 0.15); --bad-a15: oklch(0.68 0.21 25 / 0.15); --white-a05: oklch(1 0 0 / 0.05); --white-a08: oklch(1 0 0 / 0.08); /* Type */ --font-display: "Mustica Pro", "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --font-mono: "Pakenham", "Plus Jakarta Sans", system-ui, sans-serif; /* Radii */ --r-sm: 0.5rem; --r-md: 0.75rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-pill: 999px; /* Elevation */ --shadow-sm: 0 2px 8px -4px oklch(0 0 0 / 0.5); --shadow-md: 0 12px 30px -12px oklch(0 0 0 / 0.6); --shadow-lg: 0 30px 70px -30px oklch(0 0 0 / 0.7); --glow-brand: 0 0 40px -8px color-mix(in oklch, var(--brand) 45%, transparent); /* Layout */ --container: 1200px; --container-narrow: 860px; --gutter: clamp(1.1rem, 4vw, 2rem); /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* Light theme — the parent brand's light palette (usecalibrate.io), opted into via data-theme="light" on . No attribute = dark (the default). brand-hi flips to violet-700 (must be darker than brand on light, lighter on dark); the white-alpha surface tints flip to ink-alpha so they stay visible. */ [data-theme="light"] { color-scheme: light; --bg: oklch(0.99 0.002 270); --bg-2: oklch(0.965 0.004 270); --card: #ffffff; --card-2: oklch(0.975 0.004 275); --field: oklch(0.955 0.006 275); --fg: oklch(0.17 0.025 275); --dim: oklch(0.5 0.02 275); --dimmer: oklch(0.62 0.018 275); --brand-hi: oklch(0.491 0.27 292.58); --brand-soft: color-mix(in oklch, var(--brand) 14%, var(--bg)); --line: oklch(0.915 0.008 275); --line-soft: oklch(0.94 0.006 275); --good: oklch(0.55 0.15 160); --warn: oklch(0.6 0.13 80); --bad: oklch(0.55 0.21 25); --good-a15: oklch(0.55 0.15 160 / 0.12); --warn-a15: oklch(0.6 0.13 80 / 0.12); --bad-a15: oklch(0.55 0.21 25 / 0.12); --white-a05: oklch(0.2 0.025 275 / 0.04); --white-a08: oklch(0.2 0.025 275 / 0.07); --shadow-sm: 0 2px 8px -4px oklch(0.2 0.03 275 / 0.12); --shadow-md: 0 12px 30px -12px oklch(0.2 0.03 275 / 0.16); --shadow-lg: 0 30px 70px -30px oklch(0.2 0.03 275 / 0.2); --glow-brand: 0 0 40px -8px color-mix(in oklch, var(--brand) 25%, transparent); }