/* Root design tokens — THE CONTRACT. * * These names are the shared surface between products. A product overrides the * VALUES in its own apps//design/_palette.scss; it must not invent new * names here, and must not rename these. * * Tokens are CSS custom properties, never SCSS variables, so a runtime theme * picker (data-theme / .light) can override them after compilation. Converting * any of these to a SCSS variable breaks theming for every consumer. * * Shape and mono values below are the ones amber and lensr independently agreed * on; they are the reason this promotion cleared the section 7 bar. */ :root { color-scheme: dark; /* ---------- Shape + layout (identical across consumers) ---------- */ --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --radius-xl: 22px; --sidebar-w: 236px; /* ---------- Type ---------- The default is the system UI stack. A product with a self-hosted brand face declares its @font-face and overrides --font in its own _palette.scss; it does NOT add the face here, because the font file ships with the product. */ --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: "Cascadia Code", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---------- Neutral-dark surfaces (defaults; products override the hue) ---------- */ --bg: hsl(228 12% 8%); --bg-deep: hsl(228 13% 5%); --panel: hsl(228 11% 12%); --panel-hi: hsl(228 10% 16%); --card: hsl(228 11% 11%); --border: hsl(228 10% 24% / 65%); --border-hi: hsl(228 10% 34% / 72%); --text: hsl(228 18% 93%); --muted: hsl(228 9% 63%); /* ---------- Semantic status ---------- Meaning is fixed: ok = succeeded, warn = proceeded with a caveat, err = failed. A product may retune the hue; it may NOT repurpose the meaning, because shared components read these. */ --ok: hsl(152 62% 47%); --err: hsl(2 72% 60%); --warn: hsl(40 80% 52%); /* ---------- Accent ---------- Deliberately neutral here. Accent is the one token every product is expected to override — it is the brand. */ --accent: hsl(215 90% 56%); --accent-hi: hsl(215 95% 64%); --accent-press: hsl(215 90% 48%); --accent-soft: hsl(215 90% 56% / 16%); --on-accent: #ffffff; /* Accent gradient ramp. components/_button.scss paints .btn-accent with these. They were promoted from lensr WITHOUT being declared here, so root's own primary button rendered unpainted in every product that did not happen to define them - SCSS does not fail on an undefined custom property, so it compiled clean and shipped broken. Defaulting them to the accent ramp keeps lensr's brand gradient working while making root self-contained. */ --gfrom: var(--accent-hi); --gvia: var(--accent); --gto: var(--accent-press); /* ---------- Elevation (ADR-0007, 2026-10-03) ---------- Depth is a ladder of surfaces plus shadows, not a second palette: --bg-deep is recessed, --panel rests, --card is raised one step, --card-hi two (hover, popovers). --edge is the 1px light a raised surface catches on its top; --shadow-sm/-md/--shadow are contact + ambient pairs by height; --glow-a/-b are the accent as ambient light behind a page. Products retune the values (the console paints them with its brand), never the meaning. */ --card-hi: hsl(228 10% 14%); --edge: hsl(228 20% 100% / 6%); --shadow-sm: 0 1px 2px hsl(228 40% 2% / 35%), inset 0 1px 0 var(--edge); --shadow-md: 0 2px 6px hsl(228 40% 2% / 30%), 0 12px 32px -12px hsl(228 40% 2% / 55%), inset 0 1px 0 var(--edge); --shadow: 0 20px 60px hsl(228 40% 2% / 45%), 0 2px 8px hsl(228 40% 2% / 35%), inset 0 1px 0 var(--edge); --glow-a: hsl(215 90% 56% / 14%); --glow-b: hsl(190 90% 50% / 7%); font-family: var(--font); font-size: 13px; line-height: 1.5; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Theming MECHANISM — not a palette. * * Root ships the switching contract and a small set of product-neutral accents. * A product's own brand theme belongs in apps//design/_palette.scss, * because a brand is product meaning (spec section 7) and root must stay neutral * (spec section 18). * * Selection is runtime: `data-theme` on :root picks an accent set, and the * `.light` class flips the surface set. Both are read by every shared component * through the token names in _tokens.scss. */ :root[data-theme="ocean"] { --accent: hsl(215 90% 56%); --accent-hi: hsl(215 95% 64%); --accent-press: hsl(215 90% 48%); --on-accent: #fff; --accent-soft: hsl(215 90% 56% / 16%); } :root[data-theme="midnight"] { --accent: hsl(262 83% 64%); --accent-hi: hsl(262 88% 72%); --accent-press: hsl(262 80% 56%); --on-accent: #fff; --accent-soft: hsl(262 83% 64% / 16%); } :root[data-theme="aurora"] { --accent: hsl(175 78% 46%); --accent-hi: hsl(175 82% 54%); --accent-press: hsl(175 78% 40%); --on-accent: hsl(180 100% 8%); --accent-soft: hsl(175 78% 46% / 16%); } :root[data-theme="forest"] { --accent: hsl(152 68% 46%); --accent-hi: hsl(152 72% 54%); --accent-press: hsl(152 68% 40%); --on-accent: hsl(155 100% 8%); --accent-soft: hsl(152 68% 46% / 16%); } /* ---------- Light surfaces (opt-in via .light) ---------- Surfaces only. Accent is left to whichever data-theme is active, so a product brand survives the light/dark flip instead of being overwritten by it. */ :root.light { color-scheme: light; --bg: hsl(220 20% 97%); --bg-deep: hsl(220 16% 93%); --panel: #ffffff; --panel-hi: hsl(220 20% 97%); --card: #ffffff; --card-hi: #ffffff; --border: hsl(220 13% 88%); --border-hi: hsl(220 13% 79%); --text: hsl(222 20% 14%); --muted: hsl(222 8% 44%); /* Elevation in light: the step is the shadow, the fill stays white (ADR-0007). */ --edge: hsl(0 0% 100% / 90%); --shadow-sm: 0 1px 2px hsl(222 30% 12% / 6%), 0 1px 1px hsl(222 30% 12% / 3%); --shadow-md: 0 2px 6px hsl(222 30% 12% / 5%), 0 14px 36px -14px hsl(222 30% 12% / 14%); --shadow: 0 20px 60px hsl(222 30% 12% / 10%), 0 3px 14px hsl(222 30% 12% / 6%); --glow-a: hsl(215 90% 56% / 10%); --glow-b: hsl(190 90% 50% / 5%); }