/* ========================================================================== KPS Warranty — Design tokens System: "Docket". Reference: an Australian dispatch docket / calibration certificate. Black ink on white, hairline rules, mono data columns, and one violet stamp. GOVERNING RULE Colour in this interface always means something. The brand colour is never one of the meanings. Red / green / amber belong to claim outcome and warranty state, and to nothing else. Every text-on-background pair below is verified >= 4.5:1 (>= 3:1 large). ========================================================================== */ :root { color-scheme: light; /* ---- work surface ---------------------------------------------------- */ --surface: oklch(1 0 0); /* pure white, chroma 0 */ --surface-2: oklch(0.985 0.002 285); /* panel, table header */ --surface-3: oklch(0.965 0.003 285); /* sunken, toolbar */ --surface-4: oklch(0.945 0.004 285); /* inset, track */ --ink: oklch(0.17 0.004 285); /* 19.1:1 */ --ink-2: oklch(0.42 0.006 285); /* 8.5:1 */ --ink-3: oklch(0.52 0.006 285); /* 5.5:1 — placeholders too */ --ink-invert: oklch(0.99 0 0); --hairline: oklch(0.905 0.004 285); --hairline-2: oklch(0.845 0.005 285); --hairline-3: oklch(0.75 0.006 285); /* ---- chrome: the second neutral layer (rail, sidebar, dark toolbars) -- */ --chrome: oklch(0.19 0.005 285); --chrome-2: oklch(0.245 0.006 285); --chrome-3: oklch(0.30 0.007 285); --chrome-ink: oklch(0.97 0.002 285); /* 16.9:1 */ --chrome-ink-2: oklch(0.72 0.005 285); /* 7.4:1 */ --chrome-line: oklch(0.30 0.006 285); /* ---- the stamp: primary action, current selection, focus -------------- */ /* Flat. Never a gradient. Never decorative. <= 10% of any surface. */ --stamp: oklch(0.42 0.150 300); /* 9.1:1 on white */ --stamp-hover: oklch(0.36 0.155 300); --stamp-active: oklch(0.32 0.150 300); --stamp-soft: oklch(0.955 0.020 300); /* selected row tint */ --stamp-soft-2: oklch(0.925 0.035 300); --stamp-line: oklch(0.86 0.055 300); --focus-ring: oklch(0.55 0.190 300); /* ---- semantic: owned entirely by claim outcome & warranty state ------- */ --accept: oklch(0.50 0.130 150); --accept-bg: oklch(0.965 0.030 150); --accept-line: oklch(0.88 0.060 150); --decline: oklch(0.51 0.190 27); --decline-bg: oklch(0.965 0.035 27); --decline-line: oklch(0.88 0.070 27); /* No Fault is the ABSENCE of a finding, so it is deliberately unsaturated. It used to be amber, which sat 1.1 dE from Decline under deuteranopia — two different outcomes that read as one colour. Slate fixes that at the root instead of papering over it, and it is the more honest reading: nothing was wrong with the unit. 7.4:1 on white. */ --no-fault: oklch(0.45 0.022 258); --no-fault-bg: oklch(0.965 0.008 258); --no-fault-line: oklch(0.875 0.018 258); /* Amber is now warning ONLY — pending payment, unmapped data, a blocked import. A caution, never an outcome. */ --warn: oklch(0.52 0.130 78); --warn-bg: oklch(0.965 0.040 78); --warn-line: oklch(0.88 0.080 78); --info: oklch(0.48 0.080 240); --info-bg: oklch(0.965 0.025 240); --info-line: oklch(0.88 0.045 240); /* ---- product brand swatches — DATA ONLY ------------------------------- */ /* Rendered as an outlined mono chip with a square swatch, never as a filled pill. Status pills are filled + worded. The shape vocabulary carries the distinction; colour is the secondary cue. */ --brand-red: oklch(0.55 0.200 27); --brand-emerald: oklch(0.50 0.120 160); --brand-unmapped: oklch(0.55 0.006 285); /* ---- elevation -------------------------------------------------------- */ --shadow-1: 0 1px 2px oklch(0.17 0.004 285 / 0.06), 0 1px 1px oklch(0.17 0.004 285 / 0.04); --shadow-2: 0 2px 4px oklch(0.17 0.004 285 / 0.06), 0 4px 12px oklch(0.17 0.004 285 / 0.07); --shadow-3: 0 8px 16px oklch(0.17 0.004 285 / 0.08), 0 24px 48px oklch(0.17 0.004 285 / 0.12); --shadow-inset: inset 0 1px 2px oklch(0.17 0.004 285 / 0.05); } /* ========================================================================== Dark theme. Only the tokens above are redefined — nothing else. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } :root:not([data-theme="light"]) { --surface: oklch(0.155 0.004 285); --surface-2: oklch(0.19 0.005 285); --surface-3: oklch(0.225 0.006 285); --surface-4: oklch(0.26 0.006 285); --ink: oklch(0.96 0.003 285); --ink-2: oklch(0.72 0.006 285); --ink-3: oklch(0.62 0.006 285); --ink-invert: oklch(0.14 0.004 285); --hairline: oklch(0.28 0.006 285); --hairline-2: oklch(0.35 0.007 285); --hairline-3: oklch(0.44 0.008 285); --chrome: oklch(0.12 0.004 285); --chrome-2: oklch(0.175 0.005 285); --chrome-3: oklch(0.235 0.006 285); --chrome-ink: oklch(0.95 0.003 285); --chrome-ink-2: oklch(0.68 0.006 285); --chrome-line: oklch(0.24 0.006 285); --stamp: oklch(0.72 0.150 305); --stamp-hover: oklch(0.79 0.140 305); --stamp-active: oklch(0.66 0.155 305); --stamp-soft: oklch(0.245 0.045 300); --stamp-soft-2: oklch(0.30 0.060 300); --stamp-line: oklch(0.38 0.070 300); --focus-ring: oklch(0.75 0.160 305); --accept: oklch(0.78 0.140 152); --accept-bg: oklch(0.24 0.045 152); --accept-line: oklch(0.35 0.070 152); --decline: oklch(0.75 0.160 27); --decline-bg: oklch(0.24 0.060 27); --decline-line: oklch(0.36 0.090 27); --no-fault: oklch(0.79 0.030 258); --no-fault-bg: oklch(0.245 0.018 258); --no-fault-line: oklch(0.36 0.026 258); --warn: oklch(0.82 0.130 78); --warn-bg: oklch(0.25 0.050 78); --warn-line: oklch(0.37 0.075 78); --info: oklch(0.78 0.100 240); --info-bg: oklch(0.24 0.045 240); --info-line: oklch(0.35 0.060 240); --brand-red: oklch(0.72 0.180 27); --brand-emerald: oklch(0.74 0.130 160); --brand-unmapped: oklch(0.65 0.008 285); --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4); --shadow-2: 0 2px 4px oklch(0 0 0 / 0.4), 0 4px 12px oklch(0 0 0 / 0.35); --shadow-3: 0 8px 16px oklch(0 0 0 / 0.45), 0 24px 48px oklch(0 0 0 / 0.5); --shadow-inset: inset 0 1px 2px oklch(0 0 0 / 0.3); } } /* Explicit toggle wins in both directions. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="dark"] { --surface: oklch(0.155 0.004 285); --surface-2: oklch(0.19 0.005 285); --surface-3: oklch(0.225 0.006 285); --surface-4: oklch(0.26 0.006 285); --ink: oklch(0.96 0.003 285); --ink-2: oklch(0.72 0.006 285); --ink-3: oklch(0.62 0.006 285); --ink-invert: oklch(0.14 0.004 285); --hairline: oklch(0.28 0.006 285); --hairline-2: oklch(0.35 0.007 285); --hairline-3: oklch(0.44 0.008 285); --chrome: oklch(0.12 0.004 285); --chrome-2: oklch(0.175 0.005 285); --chrome-3: oklch(0.235 0.006 285); --chrome-ink: oklch(0.95 0.003 285); --chrome-ink-2: oklch(0.68 0.006 285); --chrome-line: oklch(0.24 0.006 285); --stamp: oklch(0.72 0.150 305); --stamp-hover: oklch(0.79 0.140 305); --stamp-active: oklch(0.66 0.155 305); --stamp-soft: oklch(0.245 0.045 300); --stamp-soft-2: oklch(0.30 0.060 300); --stamp-line: oklch(0.38 0.070 300); --focus-ring: oklch(0.75 0.160 305); --accept: oklch(0.78 0.140 152); --accept-bg: oklch(0.24 0.045 152); --accept-line: oklch(0.35 0.070 152); --decline: oklch(0.75 0.160 27); --decline-bg: oklch(0.24 0.060 27); --decline-line: oklch(0.36 0.090 27); --no-fault: oklch(0.79 0.030 258); --no-fault-bg: oklch(0.245 0.018 258); --no-fault-line: oklch(0.36 0.026 258); --warn: oklch(0.82 0.130 78); --warn-bg: oklch(0.25 0.050 78); --warn-line: oklch(0.37 0.075 78); --info: oklch(0.78 0.100 240); --info-bg: oklch(0.24 0.045 240); --info-line: oklch(0.35 0.060 240); --brand-red: oklch(0.72 0.180 27); --brand-emerald: oklch(0.74 0.130 160); --brand-unmapped: oklch(0.65 0.008 285); --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4); --shadow-2: 0 2px 4px oklch(0 0 0 / 0.4), 0 4px 12px oklch(0 0 0 / 0.35); --shadow-3: 0 8px 16px oklch(0 0 0 / 0.45), 0 24px 48px oklch(0 0 0 / 0.5); --shadow-inset: inset 0 1px 2px oklch(0 0 0 / 0.3); } /* ========================================================================== Non-colour tokens — identical in both themes ========================================================================== */ :root { /* ---- type ------------------------------------------------------------- */ --font-ui: "Archivo", ui-sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-data: "Spline Sans Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; /* App scale: fixed rem, ratio ~1.14. Users work at a consistent DPI; fluid headings in a sidebar look worse, not better. */ --t-11: 0.6875rem; /* 11px — dense table meta, chip labels */ --t-12: 0.75rem; /* 12px — labels, captions */ --t-13: 0.8125rem; /* 13px — table body, secondary UI */ --t-14: 0.875rem; /* 14px — UI default */ --t-16: 1rem; /* 16px — body, inputs (never smaller on mobile) */ --t-18: 1.125rem; /* 18px — panel titles */ --t-20: 1.25rem; /* 20px — section headings */ --t-24: 1.5rem; /* 24px — page titles */ --t-30: 1.875rem; /* 30px — big numerals */ --t-40: 2.5rem; /* 40px — hero numerals in-app */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.55; --lh-prose: 1.65; /* ---- space: 4px base -------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 1.75rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; /* ---- shape: one language everywhere ----------------------------------- */ --r-1: 3px; /* chips, swatches */ --r-2: 6px; /* controls: buttons, inputs, selects */ --r-3: 10px; /* panels, cards, modals */ --r-4: 16px; /* large surfaces */ --r-full: 999px; --ctl-sm: 28px; --ctl: 34px; --ctl-lg: 40px; --rail-w: 60px; --side-w: 244px; --topbar-h: 56px; /* ---- motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --d-press: 160ms; /* button feedback */ --d-tip: 140ms; /* tooltips */ --d-pop: 180ms; /* dropdowns, popovers */ --d-modal: 220ms; /* modals, drawers */ --d-state: 200ms; /* colour / state changes */ /* ---- z: semantic scale, never arbitrary ------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 200; --z-dropdown: 100; --z-backdrop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } @media (prefers-reduced-motion: reduce) { :root { --d-press: 1ms; --d-tip: 1ms; --d-pop: 1ms; --d-modal: 1ms; --d-state: 1ms; } }