/* --- Semantic CSS custom properties (RGB triplets) --- WARM PAPER palette (borrowed from the v2 "Warm Paper / Terracotta / Geist" design system, 2026-05-30). Values-only remap: token NAMES are unchanged so nothing downstream breaks. The "blue" accent family now carries terracotta (signal) values because it was always the primary-action color; a later PR can rename it. Identity: - Neutrals: warm paper + ink (khaki undertone), not cold gray. - One accent: terracotta "signal" for primary action, active nav, focus. - Ink-navy for links / secondary. Status hues reserved, never decorative. Source values: signal 197 91 40 · ink-navy 46 62 112 · paper-0 252 250 246. */ :root { /* Surfaces — warm paper ladder */ --surface-page: 252 250 246; /* paper-0 — warmest canvas */ --surface-card: 255 253 249; /* paper-1 */ --surface-subtle: 247 243 236; /* paper-2 — row stripe, subtle fill */ --surface-hover: 247 243 236; /* paper-2 */ --surface-active: 240 234 224; /* paper-3 */ --surface-inset: 240 234 224; /* paper-3 */ /* Text — warm ink */ --text-primary: 24 22 18; /* ink-1 — warm near-black */ --text-secondary: 66 60 50; /* ink-2 */ --text-muted: 110 101 85; /* ink-3 — labels, meta */ --text-faint: 110 101 85; /* ink-3 — held at muted for WCAG AA 4.5:1 (ink-4 fails on paper for small text). */ /* Borders — pale khaki keylines */ --border-default: 225 217 202; /* line */ --border-subtle: 238 232 219; /* line-subtle */ --border-input: 208 197 177; /* line-strong */ /* Links — ink-navy (terracotta stays reserved for actions) */ --text-link: 46 62 112; /* ink-navy 500 */ --text-link-hover: 30 42 80; /* ink-navy 700 */ /* Status: BOOKED — neutral (start of journey, undemanding) */ --status-booked-bg: 240 234 224; /* paper-3 */ --status-booked-text: 110 101 85; /* ink-3 */ --status-booked-bar: 240 234 224; /* Status: RELEASED — ink-navy (a transition state) */ --status-released-bg: 235 238 246; /* inkblue-50 */ --status-released-text: 30 42 80; /* inkblue-700 */ --status-released-bar: 235 238 246; /* Status: DOCS_IN — terracotta signal (inputs landing, wants attention) */ --status-docs_in-bg: 252 241 232; /* signal-50 */ --status-docs_in-text: 140 59 22; /* signal-700 */ --status-docs_in-bar: 252 241 232; /* Status: STUFFED — ok green (physical progress) */ --status-stuffed-bg: 228 240 224; /* ok-50 */ --status-stuffed-text: 42 92 54; /* ok-700 */ --status-stuffed-bar: 228 240 224; /* Status: BL_READY — ok green */ --status-bl_ready-bg: 228 240 224; --status-bl_ready-text: 42 92 54; --status-bl_ready-bar: 228 240 224; /* Status: SHIPPED — ok green */ --status-shipped-bg: 228 240 224; --status-shipped-text: 42 92 54; --status-shipped-bar: 228 240 224; /* Status: ARRIVED — ok green */ --status-arrived-bg: 228 240 224; --status-arrived-text: 42 92 54; --status-arrived-bar: 228 240 224; /* Status: DELIVERED — neutral (done, archived from attention) */ --status-delivered-bg: 240 234 224; --status-delivered-text: 110 101 85; --status-delivered-bar: 240 234 224; /* Status: ON_HOLD — urgent red (intervention required) */ --status-on_hold-bg: 252 233 228; /* urgent-50 */ --status-on_hold-text: 147 28 28; /* urgent-700 */ --status-on_hold-bar: 252 233 228; /* Status: CANCELLED — neutral (terminal, do not draw the eye) */ --status-cancelled-bg: 240 234 224; --status-cancelled-text: 110 101 85; --status-cancelled-bar: 240 234 224; /* --- Accent palette (RGB triplets). "strong" = saturated button fill + hover. "soft" = chip/alert bg + text/border. NOTE: the "blue" family carries TERRACOTTA (signal) — it is the primary-action accent. Ink-navy lives under the "violet" family + --text-link. */ --accent-blue-strong: 190 85 42; /* signal-500 (terracotta) — primary action; dark enough that white button text clears WCAG AA (4.5:1) */ --accent-blue-strong-hover: 172 74 29; /* signal-600 */ --accent-blue-soft-bg: 252 241 232; /* signal-50 */ --accent-blue-soft-text: 140 59 22; /* signal-700 */ --accent-blue-soft-border: 241 193 157; /* signal-200 */ --accent-red-strong: 192 44 38; /* status-urgent */ --accent-red-strong-hover: 147 28 28; --accent-red-soft-bg: 252 233 228; --accent-red-soft-text: 147 28 28; --accent-red-soft-border: 238 190 182; --accent-amber-strong: 198 124 28; /* status-warn */ --accent-amber-strong-hover: 140 82 8; --accent-amber-soft-bg: 251 236 208; --accent-amber-soft-text: 140 82 8; --accent-amber-soft-border: 233 200 140; --accent-green-strong: 64 128 78; /* status-ok */ --accent-green-strong-hover: 42 92 54; --accent-green-soft-bg: 228 240 224; --accent-green-soft-text: 42 92 54; --accent-green-soft-border: 183 211 188; --accent-violet-strong: 46 62 112; /* ink-navy — secondary accent */ --accent-violet-strong-hover: 30 42 80; --accent-violet-soft-bg: 235 238 246; --accent-violet-soft-text: 30 42 80; --accent-violet-soft-border: 197 206 230; --accent-teal-soft-bg: 228 240 224; /* fold teal into ok-green (no teal in warm palette) */ --accent-teal-soft-text: 42 92 54; --accent-gray-soft-bg: 240 234 224; /* warm neutral */ --accent-gray-soft-text: 110 101 85; --accent-gray-soft-border: 225 217 202; /* --- Paper chrome (lot-detail workspace) — OKLCH, theme-fixed --- Deliberately absent from the .dark block: the lot workspace frames the white generated PDF, which keeps its print colors in both themes, so the chrome around it (freeze banner, armed confirms) holds its light-mode ink everywhere. Full OKLCH values, not RGB triplets — they are never composed with Tailwind alpha utilities, so use as var(--x), not rgb(var(--x)). */ --paper-white: oklch(1 0 0); /* the PDF sheet; controls sitting on the freeze banner */ --freeze-bg: oklch(0.96 0.04 80); /* bronze family: the approved/locked freeze state */ --freeze-border: oklch(0.78 0.10 75); --freeze-ink: oklch(0.30 0.08 65); --freeze-accent: oklch(0.55 0.12 65); /* active fills + button border */ --freeze-accent-deep: oklch(0.40 0.12 65); /* the LOCKED/APPROVED pill fill */ --freeze-on-accent: oklch(0.98 0.01 80); /* warm-white text on accent fills */ --armed-bg: oklch(0.55 0.18 30); /* warm red: two-click destructive confirm */ --armed-bg-hover: oklch(0.50 0.18 30); --armed-border: oklch(0.45 0.18 30); --armed-ink: oklch(0.99 0 0); /* --- Progress-bar segment palette (per-status), brighter so stacked segments read distinct in tight pixel heights. Warm-tuned. */ --seg-shipped: 122 176 132; /* light ok-green */ --seg-bl_ready: 138 188 148; /* light ok-green */ --seg-stuffed: 219 160 70; /* light warn */ --seg-docs_in: 241 193 157; /* signal-200 (light terracotta) */ --seg-released: 150 165 205; /* light ink-navy */ --seg-booked: 205 196 178; /* warm neutral */ /* --- Radius scale --- The Tailwind rounded-* utilities resolve to these same tokens (tailwind.config.js replaces its borderRadius scale), so templates and hand-written CSS share one radius vocabulary. */ --radius-xs: 2px; /* micro chrome only: stripe end-caps, focus-ring corners */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; /* --- Type scale (font-size) --- One named ladder shared by hand-written CSS (var(--fs-*)) and template classes (Tailwind text-*). Values line up 1:1 with Tailwind's named sizes; --fs-3xs/2xs are the sub-12px micro tier added in tailwind.config.js. Size only — line-height stays on each rule. */ --fs-3xs: 10px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 20px; /* --- Focus ring (opacity baked in at call site) --- */ --ring-focus-width: 3px; --ring-focus-alpha: 0.20; /* --- Elevation scale --- Warm brown-tinted shadows so cards sit ON paper, not on plastic. Pair with a 1px border; stack --shadow-ring underneath for a halo. */ --shadow-xs: 0 1px 2px rgba(66, 48, 22, 0.05); --shadow-sm: 0 1px 3px rgba(66, 48, 22, 0.07), 0 1px 2px rgba(66, 48, 22, 0.05); --shadow-md: 0 4px 6px rgba(66, 48, 22, 0.07), 0 2px 4px rgba(66, 48, 22, 0.05); --shadow-lg: 0 10px 15px rgba(66, 48, 22, 0.08), 0 4px 6px rgba(66, 48, 22, 0.05); --shadow-xl: 0 20px 25px rgba(66, 48, 22, 0.10), 0 8px 10px rgba(66, 48, 22, 0.05); --shadow-2xl: 0 25px 50px rgba(66, 48, 22, 0.16); --shadow-ring: 0 0 0 1px rgba(66, 48, 22, 0.05); } .dark { /* WARM DARK — derived variant (the v2 kit is light-only; this extends the warm/terracotta identity into dark: warm charcoal-brown canvas, not blue-black; terracotta lifted + slightly desaturated for contrast). */ /* Surfaces — warm charcoal ladder */ --surface-page: 26 24 20; --surface-card: 37 33 28; --surface-subtle: 37 33 28; --surface-hover: 50 45 38; --surface-active: 56 51 42; --surface-inset: 50 45 38; /* Text — warm light */ --text-primary: 245 242 236; --text-secondary: 205 198 186; --text-muted: 162 153 137; --text-faint: 162 153 137; /* held at muted for AA on warm-dark cards */ /* Borders */ --border-default: 60 54 45; --border-subtle: 50 45 38; --border-input: 82 74 62; /* Links — light ink-navy (periwinkle) for contrast on dark */ --text-link: 150 168 215; --text-link-hover: 188 200 232; /* Status: BOOKED — neutral */ --status-booked-bg: 50 45 38; --status-booked-text: 188 180 165; --status-booked-bar: 50 45 38; /* Status: RELEASED — ink-navy */ --status-released-bg: 38 46 72; --status-released-text: 170 186 230; --status-released-bar: 38 46 72; /* Status: DOCS_IN — terracotta signal */ --status-docs_in-bg: 74 40 24; --status-docs_in-text: 240 180 150; --status-docs_in-bar: 74 40 24; /* Status: STUFFED — ok green */ --status-stuffed-bg: 28 64 38; --status-stuffed-text: 150 205 162; --status-stuffed-bar: 28 64 38; /* Status: BL_READY — ok green */ --status-bl_ready-bg: 28 64 38; --status-bl_ready-text: 150 205 162; --status-bl_ready-bar: 28 64 38; /* Status: SHIPPED — ok green */ --status-shipped-bg: 28 64 38; --status-shipped-text: 150 205 162; --status-shipped-bar: 28 64 38; /* Status: ARRIVED — ok green */ --status-arrived-bg: 28 64 38; --status-arrived-text: 150 205 162; --status-arrived-bar: 28 64 38; /* Status: DELIVERED — neutral */ --status-delivered-bg: 50 45 38; --status-delivered-text: 162 153 137; --status-delivered-bar: 50 45 38; /* Status: ON_HOLD — urgent red */ --status-on_hold-bg: 92 30 26; --status-on_hold-text: 240 170 162; --status-on_hold-bar: 92 30 26; /* Status: CANCELLED — neutral */ --status-cancelled-bg: 50 45 38; --status-cancelled-text: 162 153 137; --status-cancelled-bar: 50 45 38; /* --- Accent palette (warm dark) --- */ --accent-blue-strong: 188 90 50; /* terracotta — dark enough that white button text clears WCAG AA (4.5:1) */ --accent-blue-strong-hover: 168 76 42; --accent-blue-soft-bg: 74 40 24; --accent-blue-soft-text: 240 180 150; --accent-blue-soft-border: 140 74 44; --accent-red-strong: 205 74 64; --accent-red-strong-hover: 185 58 50; /* darkens (not lightens) on hover so .btn-danger white text stays AA */ --accent-red-soft-bg: 92 30 26; --accent-red-soft-text: 240 170 162; --accent-red-soft-border: 140 56 48; --accent-amber-strong: 214 150 60; --accent-amber-strong-hover: 228 170 90; --accent-amber-soft-bg: 86 56 18; --accent-amber-soft-text: 235 195 120; --accent-amber-soft-border: 128 90 36; --accent-green-strong: 54 128 76; /* dark enough that white button text clears WCAG AA (4.5:1) */ --accent-green-strong-hover: 42 104 62; --accent-green-soft-bg: 28 64 38; --accent-green-soft-text: 150 205 162; --accent-green-soft-border: 46 96 60; --accent-violet-strong: 72 94 156; /* ink-navy — dark enough that white text (.scope-buyer, .batch-bar.violet) clears WCAG AA (4.5:1) */ --accent-violet-strong-hover: 56 74 124; /* darkens on hover so white text stays AA */ --accent-violet-soft-bg: 38 46 72; --accent-violet-soft-text: 170 186 230; --accent-violet-soft-border: 64 78 120; --accent-teal-soft-bg: 28 64 38; --accent-teal-soft-text: 150 205 162; --accent-gray-soft-bg: 50 45 38; --accent-gray-soft-text: 162 153 137; --accent-gray-soft-border: 82 74 62; /* --- Progress-bar segment palette (warm dark) --- */ --seg-shipped: 42 92 54; --seg-bl_ready: 54 110 68; --seg-stuffed: 140 82 8; --seg-docs_in: 74 40 24; --seg-released: 54 66 104; --seg-booked: 56 51 42; /* --- Elevation scale (dark) — black, heavier falloff --- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6), 0 8px 10px rgba(0, 0, 0, 0.4); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7); --shadow-ring: 0 0 0 1px rgba(255, 255, 255, 0.06); }