/* --------------------------------------------------------------------------- Outsource China — design tokens Light is the canonical theme: it is the default, the one product photography is shot against, and the one every colour decision is made in. Dark is derived from it. Names are semantic (--surface-raised), never literal (--gray-50), so the dark theme is a value swap and not a rename. Every colour is written once, as light-dark(LIGHT, DARK). The browser picks the value from color-scheme, which the theme switch controls: no data-theme attribute -> "Match system": the OS decides data-theme="light|dark" -> forced, whatever the OS says light-dark() resolves where a token is used, so never set color-scheme on a subtree unless that subtree really should flip theme. --------------------------------------------------------------------------- */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* Paper — reading surfaces */ --bg: light-dark(#f2f3f0, #0b1017); --surface: light-dark(#ffffff, #121921); --surface-raised: light-dark(#ffffff, #18212b); --surface-sunken: light-dark(#f6f7f5, #0e141b); --surface-hover: light-dark(#eef1f2, #1d2732); /* Product photography sits on a light plate in BOTH themes. Colour fidelity is a purchasing decision — a buyer choosing a fabric shade must see the true colour whichever theme they are in. */ --photo-plate: light-dark(#ffffff, #f4f5f6); /* Command plates — dark in both themes: masthead, category strip, footer, admin chrome, dark heroes. Text on them uses --plate-text*, never --text. */ --plate-0: #060b12; --plate-1: #0b131e; --plate-2: #111c2b; --plate-3: #18263a; --plate-line: rgba(148, 170, 196, .14); --plate-line-strong: rgba(148, 170, 196, .26); --plate-text: #e9eef4; --plate-text-muted: #93a3b8; --plate-hover: rgba(255, 255, 255, .05); /* Navigation — legacy names, kept as aliases of the plates until every rule has moved to --plate-*. */ --nav: var(--plate-1); --nav-2: var(--plate-2); --nav-text: var(--plate-text); --nav-text-muted: var(--plate-text-muted); --nav-border: var(--plate-line-strong); /* Text */ --text: light-dark(#11161c, #e6eaef); --text-muted: light-dark(#56606b, #9aa5b1); --text-subtle: light-dark(#7d8792, #7b8695); --text-inverse: light-dark(#ffffff, #0b1017); /* Lines. --grid-line is the hairline inside data grids; --border frames them. */ --border: light-dark(#dfe3e6, #263039); --border-strong: light-dark(#c4ccd3, #38444f); --grid-line: light-dark(rgba(17, 22, 28, .07), rgba(230, 234, 239, .07)); --grid-line-strong: light-dark(rgba(17, 22, 28, .13), rgba(230, 234, 239, .13)); /* Brand — the "Request a quote" colour, and nothing else */ --brand: light-dark(#f2a032, #f5ac48); --brand-hover: light-dark(#e08f1e, #ffbe66); --brand-contrast: light-dark(#21180a, #1a1204); --brand-on-dark: #f8b65c; /* amber text on --plate-* */ --brand-subtle: light-dark(#fdf3e3, #2a2113); /* Accent — links and secondary actions */ --accent: light-dark(#0a6e80, #4fc3d9); --accent-hover: light-dark(#085765, #7ad4e6); --accent-subtle: light-dark(#e6f3f6, #122c33); /* Signal — data that is live or computed: counts, meters, active filters */ --signal: light-dark(#0b7d93, #5ad7ef); --signal-subtle: light-dark(#e3f4f7, #0f2a31); --signal-on-plate: #5ad7ef; /* Status */ --success: light-dark(#1c7a4a, #4ec98a); --success-subtle: light-dark(#e6f4ec, #12291d); --warning: light-dark(#9a6212, #e0aa4d); --warning-subtle: light-dark(#fdf2df, #2b2314); --danger: light-dark(#b3261e, #f28b82); --danger-subtle: light-dark(#fdeceb, #2e1917); --info: light-dark(#1e5fa8, #7cb2f0); --info-subtle: light-dark(#e8f1fb, #16232f); /* Status on command plates (fixed: plates do not theme) */ --ok-on-plate: #56d99a; --caution-on-plate: #f2c063; --alert-on-plate: #ff8a80; /* Compliance states — what a matrix cell or a certification chip means */ --cx-required: var(--warning); --cx-required-subtle: var(--warning-subtle); --cx-common: var(--info); --cx-common-subtle: var(--info-subtle); --cx-declared: var(--info); --cx-declared-subtle: var(--info-subtle); --cx-verified: var(--success); --cx-verified-subtle: var(--success-subtle); --cx-na: var(--text-subtle); /* Risk — feasibility and exposure */ --risk-low: var(--success); --risk-medium: var(--warning); --risk-high: var(--danger); /* Glass — on dark plates only, never on paper or over a photo */ --glass-bg: rgba(11, 19, 30, .66); --glass-bg-strong: rgba(6, 11, 18, .86); --glass-border: rgba(255, 255, 255, .08); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .06); --glass-blur: blur(14px) saturate(140%); /* Commercial signals — legacy, no public page shows a MOQ */ --moq: var(--text-muted); /* Elevation */ --shadow-sm: 0 1px 2px light-dark(rgba(16, 24, 32, .06), rgba(0, 0, 0, .4)); --shadow: 0 2px 8px light-dark(rgba(16, 24, 32, .08), rgba(0, 0, 0, .45)); --shadow-lg: 0 12px 32px light-dark(rgba(16, 24, 32, .14), rgba(0, 0, 0, .55)); --shadow-pop: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 1px var(--plate-line); --ring: 0 0 0 3px light-dark(rgba(10, 110, 128, .28), rgba(79, 195, 217, .35)); --ring-plate: 0 0 0 2px var(--signal-on-plate); /* Geometry */ --radius-sm: 3px; --radius: 6px; --radius-lg: 10px; --radius-pill: 999px; --maxw: 1480px; /* Space (4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; /* Type */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 32px; --fs-2xl: clamp(30px, 3.4vw, 48px); --track-label: .08em; /* Shell */ --mast-h: 56px; --corridor-h: 40px; --sticky-top: calc(var(--mast-h) + 16px); /* Layers */ --z-mast: 60; --z-pop: 70; --z-flash: 80; --z-palette: 90; }