/* KTM Voyage CRM — design tokens [F5]. The single place where a colour, a shadow, a radius or a spacing step is decided. Every other stylesheet reads from here, so switching the theme repaints the whole app without a single rule being rewritten. THREE MODES, ONE ATTRIBUTE theme.js writes data-theme="light" | data-theme="dark" on , or removes the attribute entirely for "system". That gives: - explicit light: :root wins and the OS is ignored - explicit dark: :root[data-theme="dark"] wins and the OS is ignored - system: no attribute, so the prefers-color-scheme block decides WHY THE SELECTORS LOOK LIKE THIS :root:not([data-theme="light"]) inside the media query has exactly the same specificity (0,2,0) as :root[data-theme="dark"]. Ties are broken by source order, so the explicit-dark block is written AFTER the media query and the print block after both. That is the whole reason for the file's ordering — do not reshuffle it. Dark is not an inverted light theme. The greys carry a slight blue cast so the gold stays warm against them, and every status colour is lifted until it clears 4.5:1 on --surface. The login brand panel stays deep-brown in both modes: it is the brand, not a surface. */ :root{ /* ---------- surfaces ---------- */ --bg:#faf8f1; /* page background */ --bg-2:#f6f4ee; /* subtle band, table head, search field */ --surface:#ffffff; /* card background */ --surface-2:#faf9f3; /* nested surface, zebra stripe */ --surface-3:#ffffff; /* raised: menus, popovers, drawers */ --surface-accent:#fbf7e6; /* gold tinted surface */ --surface-glass:rgba(255,255,255,.94); /* sticky bars that blur what is behind them */ /* ---------- lines ---------- */ --border:#e6e4dc; --border-strong:#d9d4c2; --accent-line:#e6dcae; /* hairline inside a gold-washed panel */ /* ---------- text ---------- */ --text:#1c222b; --text-head:#292109; /* Playfair headings — deliberately warmer than --text */ --text-muted:#5d646f; --text-faint:#8a909b; --text-olive:#5d5636; /* table headers and tags: the brand's warm grey */ /* ---------- accent (gold) ---------- */ --accent:#ccb52d; --accent-2:#dbb73f; /* hover */ --accent-ink:#211a05; /* text ON a gold fill */ --accent-soft:rgba(204,181,45,.16); /* gold wash background */ --accent-text:#7e6e12; /* gold-coloured text on a normal surface — deep enough to clear 4.5:1 on white AND on the gold wash */ --accent-text-strong:#6b5f22; /* body copy inside a gold-washed panel */ /* ---------- status ---------- */ --ok:#2f9e51; --warn:#dbb73f; --bad:#ca6350; --bad-2:#b45241; /* danger button hover */ --info:#5987cb; --opt:#c98a1a; --teal:#2b9d97; --purple:#6a4bb0; --bad-ink:#ffffff; /* text ON a --bad fill (danger button, count badge) */ --bad-text:#8e3a2b; /* readable red text on a red tint */ --info-text:#33517e; /* readable blue text on a blue tint */ /* ---------- sidebar (dark in light mode too — it is brand furniture) ---------- */ --side-bg:#141822; --side-bg-2:#212630; /* hover / active row */ --side-text:#aeb4c0; --side-text-strong:#ffffff; --side-text-faint:#8a909b; --side-line:#2b303b; --side-scroll:#3a4150; /* ---------- login brand panel (deep brown in BOTH modes) ---------- */ --brand-1:#312808; --brand-2:#20190a; --brand-3:#14100a; --on-brand:#faf9f1; --on-brand-2:#d9d3bd; --on-brand-3:#b8b09a; /* ---------- toasts (dark chip that must read on any background) ---------- */ --toast-bg:#141822; --toast-text:#f0f1f4; --toast-muted:#9aa1ad; /* ---------- interaction ---------- */ --hover:#f4f2ea; /* neutral hover fill for ghost controls */ --ring:rgba(204,181,45,.18); /* focus halo behind the outline */ --press:rgba(20,24,34,.14); /* inset shade while a button is held */ --overlay:rgba(20,24,34,.5); /* modal backdrop */ --overlay-soft:rgba(20,24,34,.45); /* mobile sidebar backdrop */ --scrim:rgba(20,24,34,.55); /* welcome-tour spotlight mask */ --skel:#eeece4; /* skeleton loader base */ --skel-sheen:rgba(255,255,255,.65); /* the shimmer that travels over it */ /* ---------- elevation ---------- */ --shadow-1:0 1px 2px rgba(20,24,34,.06); --shadow-2:0 1px 3px rgba(20,24,34,.06),0 8px 24px rgba(20,24,34,.05); --shadow-3:0 24px 64px rgba(20,24,34,.3); --shadow-hover:0 3px 6px rgba(20,24,34,.08),0 12px 30px rgba(20,24,34,.08); --shadow-drop:0 10px 26px rgba(20,24,34,.14),0 24px 60px rgba(20,24,34,.16); /* ---------- geometry ---------- */ --radius-sm:6px; --radius:10px; --radius-lg:14px; --radius-xl:20px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px; /* ---------- stacking ---------- */ --z-sticky:5; --z-nav:20; --z-drop:40; --z-tip:60; --z-modal:100; --z-toast:200; --z-tour:300; /* Native widgets (scrollbars, date pickers, checkboxes) follow the theme. */ color-scheme:light; /* ---------- LEGACY ALIASES ---------- The 16 module stylesheets were written against the old names and are owned by the module agents. Aliasing costs nothing — custom-property substitution is lazy, so --paper resolves to whatever --bg is on :root at that moment, which means the aliases follow the theme automatically and only need to be declared once. */ --paper:var(--bg); --card:var(--surface); --line:var(--border); --ink:var(--text); --muted:var(--text-muted); --muted-2:var(--text-faint); --gold:var(--accent); --gold-2:var(--accent-2); --dark:var(--side-bg); --dark-2:var(--side-bg-2); --shadow:var(--shadow-2); --good:var(--ok); /* invoices.css asks for var(--good,#3f7d3f) — give it a real one */ } /* ---------- SYSTEM MODE: follow the OS, unless the user picked light ---------- */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0f1319; --bg-2:#141922; --surface:#171d27; --surface-2:#1e2530; --surface-3:#252d3a; --surface-accent:#241f0e; --surface-glass:rgba(23,29,39,.92); --border:#2a323e; --border-strong:#3a4350; --accent-line:#4a4220; --text:#e8ebf0; --text-head:#f2ead0; --text-muted:#9aa4b4; --text-faint:#6c7788; --text-olive:#c6ba8b; --accent:#d9c451; --accent-2:#e6d268; --accent-ink:#17130a; --accent-soft:rgba(217,196,81,.16); --accent-text:#dfcb6b; --accent-text-strong:#ecdfae; --ok:#4ec27a; --warn:#e0c05a; --bad:#e58a70; --bad-2:#f0a08a; --info:#7ea9ea; --opt:#dfa445; --teal:#45bdb6; --purple:#a58ae0; --bad-ink:#1a1210; --bad-text:#e58a70; --info-text:#7ea9ea; --side-bg:#0b0e14; --side-bg-2:#161c26; --side-text:#98a2b3; --side-text-strong:#f2f5f9; --side-text-faint:#6f7a8b; --side-line:#1b2330; --side-scroll:#2b3442; --brand-1:#2a2107; --brand-2:#1a1408; --brand-3:#0d0a06; --on-brand:#faf9f1; --on-brand-2:#d9d3bd; --on-brand-3:#b8b09a; /* On a dark page a near-black toast disappears — lift it to a raised surface. */ --toast-bg:#262f3c; --toast-text:#eef1f6; --toast-muted:#97a2b2; --hover:#232b36; --ring:rgba(217,196,81,.26); --press:rgba(0,0,0,.35); --overlay:rgba(0,0,0,.66); --overlay-soft:rgba(0,0,0,.6); --scrim:rgba(0,0,0,.72); --skel:#222a35; --skel-sheen:rgba(255,255,255,.06); --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 1px 3px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.45); --shadow-3:0 24px 64px rgba(0,0,0,.65); --shadow-hover:0 3px 8px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.5); --shadow-drop:0 10px 26px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.55); color-scheme:dark; } } /* ---------- EXPLICIT DARK: written last so it also wins on a light OS ---------- */ :root[data-theme="dark"]{ --bg:#0f1319; --bg-2:#141922; --surface:#171d27; --surface-2:#1e2530; --surface-3:#252d3a; --surface-accent:#241f0e; --surface-glass:rgba(23,29,39,.92); --border:#2a323e; --border-strong:#3a4350; --accent-line:#4a4220; --text:#e8ebf0; --text-head:#f2ead0; --text-muted:#9aa4b4; --text-faint:#6c7788; --text-olive:#c6ba8b; --accent:#d9c451; --accent-2:#e6d268; --accent-ink:#17130a; --accent-soft:rgba(217,196,81,.16); --accent-text:#dfcb6b; --accent-text-strong:#ecdfae; --ok:#4ec27a; --warn:#e0c05a; --bad:#e58a70; --bad-2:#f0a08a; --info:#7ea9ea; --opt:#dfa445; --teal:#45bdb6; --purple:#a58ae0; --bad-ink:#1a1210; --bad-text:#e58a70; --info-text:#7ea9ea; --side-bg:#0b0e14; --side-bg-2:#161c26; --side-text:#98a2b3; --side-text-strong:#f2f5f9; --side-text-faint:#6f7a8b; --side-line:#1b2330; --side-scroll:#2b3442; --brand-1:#2a2107; --brand-2:#1a1408; --brand-3:#0d0a06; --on-brand:#faf9f1; --on-brand-2:#d9d3bd; --on-brand-3:#b8b09a; --toast-bg:#262f3c; --toast-text:#eef1f6; --toast-muted:#97a2b2; --hover:#232b36; --ring:rgba(217,196,81,.26); --press:rgba(0,0,0,.35); --overlay:rgba(0,0,0,.66); --overlay-soft:rgba(0,0,0,.6); --scrim:rgba(0,0,0,.72); --skel:#222a35; --skel-sheen:rgba(255,255,255,.06); --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 1px 3px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.45); --shadow-3:0 24px 64px rgba(0,0,0,.65); --shadow-hover:0 3px 8px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.5); --shadow-drop:0 10px 26px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.55); color-scheme:dark; } /* ---------- THEME SWITCH: cross-fade instead of a hard flash ---------- Only the three properties that actually change carry the transition; animating everything would make every hover on every table row feel sluggish. */ html{transition:background-color .15s ease,border-color .15s ease,color .15s ease} body{transition:background-color .15s ease,border-color .15s ease,color .15s ease} @media (prefers-reduced-motion:reduce){ html,body{transition:none} } /* ---------- PRINT: always light ---------- A dark theme on paper wastes a cartridge and comes out unreadable, so print forces the light set back. All three selectors are listed because each one must out-rank its counterpart above: same specificity, later in the file, therefore it wins. */ @media print{ :root, :root[data-theme="dark"], :root:not([data-theme="light"]){ --bg:#faf8f1; --bg-2:#f6f4ee; --surface:#ffffff; --surface-2:#faf9f3; --surface-3:#ffffff; --surface-accent:#fbf7e6; --surface-glass:#ffffff; --border:#e6e4dc; --border-strong:#d9d4c2; --accent-line:#e6dcae; --text:#1c222b; --text-head:#292109; --text-muted:#5d646f; --text-faint:#8a909b; --text-olive:#5d5636; --accent:#ccb52d; --accent-2:#dbb73f; --accent-ink:#211a05; --accent-soft:rgba(204,181,45,.16); --accent-text:#7e6e12; --accent-text-strong:#6b5f22; --ok:#2f9e51; --warn:#dbb73f; --bad:#ca6350; --bad-2:#b45241; --info:#5987cb; --opt:#c98a1a; --teal:#2b9d97; --purple:#6a4bb0; --bad-ink:#ffffff; --bad-text:#8e3a2b; --info-text:#33517e; --side-bg:#141822; --side-bg-2:#212630; --side-text:#aeb4c0; --side-text-strong:#ffffff; --side-text-faint:#8a909b; --side-line:#2b303b; --side-scroll:#3a4150; --brand-1:#312808; --brand-2:#20190a; --brand-3:#14100a; --on-brand:#faf9f1; --on-brand-2:#d9d3bd; --on-brand-3:#b8b09a; --toast-bg:#141822; --toast-text:#f0f1f4; --toast-muted:#9aa1ad; --hover:#f4f2ea; --ring:rgba(204,181,45,.18); --press:rgba(20,24,34,.14); --overlay:rgba(20,24,34,.5); --overlay-soft:rgba(20,24,34,.45); --scrim:rgba(20,24,34,.55); --skel:#eeece4; --skel-sheen:rgba(255,255,255,.65); /* Shadows never print well; flatten them instead of paying for grey toner. */ --shadow-1:none; --shadow-2:none; --shadow-3:none; --shadow-hover:none; --shadow-drop:none; color-scheme:light; } }