/* ========================================================================== Workshop Precision — design tokens Blinds & Curtains MRP prototype Colour principle: COLOUR MARKS THE EXCEPTION, NEVER THE NORM. Covered / on-time / in-spec rows carry no colour at all. Only shortages, risks and blocks are painted. That is what keeps a 200-row table readable. ========================================================================== */ /* ---- Fonts (self-hosted, works offline) --------------------------------- */ @font-face { font-family: 'Plex Sans'; src: url('../fonts/plex-sans-var.woff2') format('woff2-variations'); font-weight: 100 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Plex Mono'; src: url('../fonts/plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Plex Mono'; src: url('../fonts/plex-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Plex Mono'; src: url('../fonts/plex-mono-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } :root { /* ---- Type ------------------------------------------------------------ */ --font-ui: 'Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-data: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Fixed rem scale, ratio ~1.14. No fluid clamp — product UI is read at consistent DPI and a shrinking heading in a sidebar looks worse, not better. */ --fs-3xs: 0.6875rem; /* 11px — micro labels, axis ticks */ --fs-2xs: 0.75rem; /* 12px — dense table cells, captions */ --fs-xs: 0.8125rem; /* 13px — secondary UI */ --fs-sm: 0.875rem; /* 14px — body / UI default */ --fs-md: 1rem; /* 16px — emphasis */ --fs-lg: 1.125rem; /* 18px — panel titles */ --fs-xl: 1.3125rem; /* 21px — page title */ --fs-2xl: 1.5rem; /* 24px — section */ --fs-3xl: 1.875rem; /* 30px — metric */ --fs-4xl: 2.5rem; /* 40px — kiosk metric */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.55; --lh-prose: 1.65; --tracking-tight: -0.011em; --tracking-label: 0.02em; /* ---- Space (4px base) ------------------------------------------------ */ --s-0: 0; --s-1: 0.25rem; /* 4 */ --s-2: 0.375rem; /* 6 */ --s-3: 0.5rem; /* 8 */ --s-4: 0.75rem; /* 12 */ --s-5: 1rem; /* 16 */ --s-6: 1.25rem; /* 20 */ --s-7: 1.5rem; /* 24 */ --s-8: 2rem; /* 32 */ --s-9: 2.5rem; /* 40 */ --s-10: 3rem; /* 48 */ --s-12: 4rem; /* 64 */ /* ---- Radius — industrial, not pill ----------------------------------- */ --r-xs: 2px; --r-sm: 3px; --r-md: 5px; --r-lg: 8px; --r-xl: 12px; /* ---- Structure ------------------------------------------------------- */ --sidebar-w: 236px; --sidebar-rail-w: 56px; --topbar-h: 52px; --content-max: 1680px; /* ---- Z-index — semantic scale, never arbitrary ----------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 200; --z-dropdown: 300; --z-drawer-backdrop: 400; --z-drawer: 410; --z-modal-backdrop: 500; --z-modal: 510; --z-toast: 600; --z-tooltip: 700; /* ---- 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); --dur-hover: 120ms; --dur-press: 140ms; --dur-pop: 160ms; --dur-drawer: 240ms; --dur-flash: 400ms; } /* ========================================================================== Light theme — the planning office. North light, six-hour sessions. ========================================================================== */ :root, [data-theme='light'] { color-scheme: light; /* Surfaces — a real three-tier depth system. The desk is the working surface panels sit ON; panels are pure white and lift off it. Previously both were oklch(1 0 0), so a panel was a white box on white separated only by a hairline — which is precisely what makes an interface read as a wireframe. The tint is toward the brand's own green, not toward warmth. */ --desk: oklch(0.974 0.0035 143); /* page background — recessed */ --canvas: oklch(1 0 0); /* controls: inputs, buttons, fields */ --raised: oklch(1 0 0); /* panels — lifted, with shadow */ --shell: oklch(0.962 0.006 143); /* sidebar, toolbars, table heads */ --shell-2: oklch(0.942 0.008 143); /* pressed / inset */ --overlay: oklch(0.22 0.012 143 / 0.34); /* Ink — four tiers, not two. Every value ≥ 4.5:1 on desk and on canvas. One grey doing every secondary job is the other half of the flat look. */ --ink: oklch(0.20 0.014 143); /* body, and the strongest headings */ --ink-2: oklch(0.38 0.012 143); /* secondary text */ --ink-muted: oklch(0.47 0.010 143); /* labels, meta */ /* The faintest tier still has to clear 4.5:1 on the DEEPEST surface it can land on (shell-2), because everything it styles is small text. Pushing it lighter for elegance is exactly how interfaces become hard to read; the real separation between this tier and --ink-muted comes from size and weight, not from lightness. */ --ink-faint: oklch(0.505 0.009 143); --ink-inverse: oklch(0.99 0.002 143); /* Lines */ --line-faint: oklch(0.945 0.005 143); --line: oklch(0.898 0.006 143); --line-strong: oklch(0.822 0.008 143); /* Primary — deep moss. Primary actions, active nav, selection. Nothing else. Deliberately far darker than any "success green" so it can never be mistaken for a status. */ --primary: oklch(0.42 0.085 143); --primary-hover: oklch(0.37 0.088 143); --primary-active: oklch(0.32 0.082 143); --primary-soft: oklch(0.958 0.020 143); --primary-line: oklch(0.86 0.042 143); --primary-ink: oklch(0.36 0.088 143); /* Accent — brass. The focused-row rail, the one number that matters. Never used as body text; --accent-ink exists for that. */ --accent: oklch(0.70 0.130 70); --accent-soft: oklch(0.972 0.030 78); --accent-line: oklch(0.87 0.070 75); --accent-ink: oklch(0.48 0.110 65); /* Status — exceptions only */ --critical: oklch(0.52 0.190 27); --critical-soft: oklch(0.966 0.020 27); --critical-line: oklch(0.878 0.062 27); --warning: oklch(0.75 0.150 72); --warning-ink: oklch(0.50 0.110 65); --warning-soft: oklch(0.970 0.030 80); --warning-line: oklch(0.880 0.070 80); --info: oklch(0.50 0.090 250); --info-soft: oklch(0.966 0.016 250); --info-line: oklch(0.872 0.045 250); /* Data-viz ramp — hue-separated so series stay distinguishable in greyscale and for the common colour-vision deficiencies. */ --viz-1: oklch(0.45 0.090 143); --viz-2: oklch(0.58 0.120 245); --viz-3: oklch(0.68 0.135 68); --viz-4: oklch(0.55 0.150 22); --viz-5: oklch(0.52 0.095 305); --viz-6: oklch(0.63 0.085 195); /* Shadows — tight and low. This is a tool, not a card gallery, but "no shadow anywhere" is what made every surface read as the same plane. */ --shadow-xs: 0 1px 1px oklch(0.22 0.012 143 / 0.04), 0 1px 3px -1px oklch(0.22 0.012 143 / 0.05); --shadow-sm: 0 1px 2px oklch(0.22 0.012 143 / 0.07); --shadow-md: 0 1px 2px oklch(0.22 0.012 143 / 0.06), 0 4px 10px -3px oklch(0.22 0.012 143 / 0.09); --shadow-pop: 0 2px 4px oklch(0.22 0.012 143 / 0.06), 0 8px 22px -6px oklch(0.22 0.012 143 / 0.14); --shadow-lg: 0 4px 8px oklch(0.22 0.012 143 / 0.07), 0 20px 44px -10px oklch(0.22 0.012 143 / 0.20); --focus-ring: var(--primary); } /* ========================================================================== Dark theme — the shop-floor terminal. Wall-mounted tablet, glare, gloves. A full token remap, not an inversion. ========================================================================== */ [data-theme='dark'] { color-scheme: dark; /* Dark inverts the stack: the desk is the DEEPEST layer and panels rise out of it, which is how depth reads when light comes from above. */ --desk: oklch(0.148 0.008 143); --canvas: oklch(0.190 0.009 143); --raised: oklch(0.212 0.009 143); --shell: oklch(0.238 0.010 143); --shell-2: oklch(0.275 0.011 143); --overlay: oklch(0.09 0.006 143 / 0.68); --ink: oklch(0.970 0.004 143); --ink-2: oklch(0.800 0.006 143); --ink-muted: oklch(0.690 0.008 143); --ink-faint: oklch(0.660 0.009 143); /* clears 4.5:1 on shell-2 */ --ink-inverse: oklch(0.14 0.010 143); --line-faint: oklch(0.252 0.009 143); --line: oklch(0.310 0.010 143); --line-strong: oklch(0.410 0.012 143); /* Primary lifts to hold contrast against the dark canvas */ --primary: oklch(0.720 0.110 143); --primary-hover: oklch(0.780 0.115 143); --primary-active: oklch(0.670 0.105 143); --primary-soft: oklch(0.285 0.038 143); --primary-line: oklch(0.400 0.062 143); --primary-ink: oklch(0.760 0.112 143); --accent: oklch(0.780 0.135 75); --accent-soft: oklch(0.300 0.045 75); --accent-line: oklch(0.430 0.075 75); --accent-ink: oklch(0.810 0.130 75); --critical: oklch(0.700 0.170 27); --critical-soft: oklch(0.295 0.060 27); --critical-line: oklch(0.430 0.100 27); --warning: oklch(0.815 0.140 78); --warning-ink: oklch(0.840 0.130 78); --warning-soft: oklch(0.300 0.050 78); --warning-line: oklch(0.440 0.080 78); --info: oklch(0.740 0.100 250); --info-soft: oklch(0.288 0.045 250); --info-line: oklch(0.420 0.070 250); --viz-1: oklch(0.72 0.110 143); --viz-2: oklch(0.72 0.115 245); --viz-3: oklch(0.80 0.130 68); --viz-4: oklch(0.70 0.155 22); --viz-5: oklch(0.72 0.105 305); --viz-6: oklch(0.76 0.085 195); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40); --shadow-md: 0 1px 2px oklch(0 0 0 / 0.35), 0 4px 10px -3px oklch(0 0 0 / 0.45); --shadow-pop: 0 2px 4px oklch(0 0 0 / 0.35), 0 8px 22px -6px oklch(0 0 0 / 0.55); --shadow-lg: 0 4px 8px oklch(0 0 0 / 0.40), 0 20px 44px -10px oklch(0 0 0 / 0.62); --focus-ring: oklch(0.800 0.115 143); }