/* Design tokens — ported from rws-www (beige + indigo). Single source of truth. Dark mode = same tokens overridden below. Theme: OS preference by default, html[data-theme=light|dark] (footer toggle, localStorage) overrides it. */ :root { color-scheme: light dark; /* native form controls follow the theme */ --bg: #EBEBDF; --bg-panel: #F4F4EA; --ink: #1b1b17; --muted: #6b6b60; --brand: #3a2dc4; /* clear indigo blue — primary */ --brand-soft: #e7e5fb; --card-ready-line: #ffffff; /* clickable-card outline */ --on-brand: #ffffff; /* text on a --brand background */ --surface: #ffffff; /* cards/inputs that sit on --bg-panel */ --line: #d8d8cc; --ok: #1f8f4e; --ok-soft: #eaf7ef; --ok-line: #bfe6cd; --warn: #b8860b; --err: #b3392e; /* value chips follow --brand (the car theme re-points it in base.html); the black LED look belongs to dark mode only */ --led-bg: var(--brand-soft); --led: var(--brand); /* page wash + panel top highlight — light-only; dark neutralises them below */ --bg-image: radial-gradient(1200px 600px at 80% -10%, #fff8 0%, #fff0 60%), linear-gradient(180deg, #F1F1E5 0%, #EBEBDF 40%, #E4E4D8 100%); --panel-hi: #fff6; --studio: #000000; /* the car photo's own black studio - same in both themes */ --font-sans: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root { --bg: #191913; /* the beige family, inverted warm */ --bg-panel: #21211a; --ink: #e8e8dc; --muted: #a3a396; --brand: #8b7cf8; /* indigo lifted for contrast on dark */ --brand-soft: #2c2a45; --on-brand: #14140f; --surface: #26261f; --line: #3a3a30; --ok: #4cc47f; --ok-soft: #1d2e24; --ok-line: #2e5c41; --warn: #d9a52a; --err: #e06a5e; --led-bg: #12120c; --led: var(--brand); --bg-image: none; --panel-hi: transparent; } } /* explicit overrides — the footer toggle sets data-theme on */ html[data-theme="light"] { color-scheme: light; /* the toggle wins over the OS: native controls AND browser autofill follow it (a second "light dark" here let a dark OS paint autofilled text white on the white inputs - 2026-09-12) */ --bg: #EBEBDF; --bg-panel: #F4F4EA; --ink: #1b1b17; --muted: #6b6b60; --brand: #3a2dc4; /* clear indigo blue — primary */ --brand-soft: #e7e5fb; --card-ready-line: #ffffff; /* clickable-card outline */ --on-brand: #ffffff; /* text on a --brand background */ --surface: #ffffff; /* cards/inputs that sit on --bg-panel */ --line: #d8d8cc; --ok: #1f8f4e; --ok-soft: #eaf7ef; --ok-line: #bfe6cd; --warn: #b8860b; --err: #b3392e; --led-bg: var(--brand-soft); --led: var(--brand); --bg-image: radial-gradient(1200px 600px at 80% -10%, #fff8 0%, #fff0 60%), linear-gradient(180deg, #F1F1E5 0%, #EBEBDF 40%, #E4E4D8 100%); --panel-hi: #fff6; --font-sans: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } html[data-theme="dark"] { color-scheme: dark; --bg: #191913; /* the beige family, inverted warm */ --bg-panel: #21211a; --ink: #e8e8dc; --muted: #a3a396; --brand: #8b7cf8; /* indigo lifted for contrast on dark */ --brand-soft: #2c2a45; --on-brand: #14140f; --surface: #26261f; --line: #3a3a30; --ok: #4cc47f; --ok-soft: #1d2e24; --ok-line: #2e5c41; --warn: #d9a52a; --err: #e06a5e; --led-bg: #12120c; --led: var(--brand); --bg-image: none; --panel-hi: transparent; }