/* ============================================================
   Ledgerline theme — design tokens
   Loaded before qb.css. Light is the default; dark applies under
   <html data-theme="dark">. Every colour in qb.css resolves to a token
   defined here, so nothing else in the stylesheet is theme-specific.
   ============================================================ */

/* -- IBM Plex Sans, self-hosted (SIL OFL 1.1, see fonts/OFL.txt) -- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
    src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
    src: url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
    src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
    src: url(../fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
    src: url(../fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
    src: url(../fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
    src: url(../fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
    src: url(../fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* -- Light (default) -- */
:root {
    color-scheme: light;

    --canvas: #f3f5f9;
    --paper: #ffffff;
    --paper-2: #f7f8fb;
    --paper-3: #eef1f6;
    --ink: #111a2b;
    --ink-2: #475569;
    --ink-3: #7c879a;
    --rule: #e4e8ef;
    --rule-strong: #cfd6e1;

    --nav: #0f1a2e;
    --nav-bg: linear-gradient(180deg, #101c31 0%, #0d1628 100%);
    --nav-border: transparent;
    --nav-ink: #dbe3f0;
    --nav-dim: #8d9bb4;
    --nav-hover: rgba(255, 255, 255, .06);
    --nav-active: rgba(255, 255, 255, .10);
    --nav-dot: #5fd3b9;
    --nav-strong: #ffffff;
    --nav-line: rgba(255, 255, 255, .06);
    --nav-field: rgba(255, 255, 255, .06);
    --nav-field-line: rgba(255, 255, 255, .10);

    --accent: #0a7d68;
    --accent-2: #07695a;
    --accent-soft: #dff3ed;

    --ai: #6247e8;
    --ai-soft: #f1eeff;
    --ai-ring: #d9d1ff;
    --ai-ink: #3d2aa8;

    --red: #c8372d;    --red-soft: #fbe6e3;
    --amber: #b86e00;  --amber-soft: #fdf0dc;
    --blue: #2d5f9e;   --blue-soft: #e3ecf7;
    --ok: #1e8e5a;     --ok-soft: #e1f3ea;

    --on-accent: #ffffff;
    --toast-bg: #111a2b;
    --toast-ink: #f3f5f9;
    --overlay: rgba(17, 26, 43, .45);

    --shadow-1: 0 1px 2px rgba(17, 26, 43, .05), 0 1px 1px rgba(17, 26, 43, .03);
    --shadow-2: 0 1px 2px rgba(17, 26, 43, .05), 0 10px 30px -14px rgba(17, 26, 43, .22);
    --shadow-pop: 0 12px 40px -12px rgba(17, 26, 43, .35);

    --radius-card: 12px;
    --radius-ctl: 8px;
    --radius-sm: 7px;

    --font: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    --invalid-ring: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent);
    --row-hover: color-mix(in srgb, var(--accent-soft) 35%, var(--paper));
    --topbar-bg: color-mix(in srgb, var(--paper) 86%, transparent);

    --rose: #c2366b;   --rose-soft: #fbe5ee;
    --violet: #6d4ae0; --violet-soft: #efeaff;
    --slate: #4b5a70;  --slate-soft: #e9edf3;

    --sidebar-w: 236px;
    --sidebar-w-collapsed: 64px;
    --topbar-h: 56px;
    --topnav-h: 0px;
    --head-h: calc(var(--topbar-h) + var(--topnav-h));
}

/* The top-bar layout adds a menu row under the header. */
:root[data-layout="topbar"] { --topnav-h: 46px; }

/* -- Dark -- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --canvas: #0b111b;
    --paper: #121a27;
    --paper-2: #162031;
    --paper-3: #1d293c;
    --ink: #e8edf5;
    --ink-2: #a9b4c4;
    --ink-3: #758197;
    --rule: #223047;
    --rule-strong: #31415b;

    --nav: #080d16;
    --nav-bg: #080d16;
    --nav-border: var(--rule);

    --accent: #3ec2a5;
    --accent-2: #5fd3b9;
    --accent-soft: #11332d;

    --ai: #a594ff;
    --ai-soft: #211b42;
    --ai-ring: #3a3170;
    --ai-ink: #d2c9ff;

    --red: #ff8a7e;    --red-soft: #3a1d1b;
    --amber: #f0b45a;  --amber-soft: #352915;
    --blue: #8db8ec;   --blue-soft: #18283c;
    --ok: #5fcf97;     --ok-soft: #15301f;
    --rose: #ff8db5;   --rose-soft: #3a1828;
    --violet: #b9a2ff; --violet-soft: #251d45;
    --slate: #b3c0d3;  --slate-soft: #1f2a3b;

    --on-accent: #06221c;
    --toast-bg: #e8edf5;
    --toast-ink: #0b111b;
    --overlay: rgba(0, 0, 0, .6);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .2);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px -14px rgba(0, 0, 0, .7);
    --shadow-pop: 0 12px 40px -12px rgba(0, 0, 0, .8);
}

/* ============================================================
   Legacy QBClone variables → Ledgerline tokens
   qb.css (and the data tables in particular) read these names. Mapping
   them here lets every existing rule pick up the new theme without the
   rule itself changing.
   ============================================================ */
:root, :root[data-theme="dark"] {
    --qb-navy: var(--ink);
    --qb-navy-light: var(--ink-2);
    --qb-blue: var(--accent);
    --qb-blue-light: var(--accent-2);
    --qb-green: var(--ok);
    --qb-green-light: var(--ok);
    --qb-amber: var(--amber);
    --qb-amber-light: var(--amber);
    --qb-teal: var(--accent);
    --qb-teal-light: var(--accent-2);
    --qb-purple: var(--ai);
    --qb-red: var(--red);
    --qb-gray-100: var(--paper-2);
    --qb-gray-200: var(--paper-3);
    --qb-gray-300: var(--rule);
    --qb-gray-400: var(--rule-strong);
    --qb-gray-500: var(--ink-3);
    --qb-gray-600: var(--ink-3);
    --qb-gray-700: var(--ink-2);
    --qb-white: var(--paper);
    --qb-text: var(--ink);
    --qb-text-light: var(--ink-3);
    --qb-border: var(--rule);
    --qb-shadow: rgba(17, 26, 43, .08);
}

/* ============================================================
   Data tables — variables only.
   The table rules in qb.css are untouched. Some of them use one legacy
   variable for two jobs (e.g. --qb-gray-100 is both the header fill and
   the row hover), so the right token is supplied per element here.
   ============================================================ */

/* Body cell borders use --qb-gray-200; Ledgerline borders are --rule. */
.qb-table { --qb-gray-200: var(--rule); }

/* Row hover: accent-soft at ~35% over paper (header stays --paper-2). */
.qb-table tbody tr:hover { --qb-gray-100: var(--row-hover); }

/* Report section headers are a dark band with white text: keep them dark
   in both themes, and keep the grand-total line readable. */
.qb-report-section-header { --qb-navy: var(--nav); }

/* Density lock. The new base type (13.5px / 1.5) and the taller Ledgerline
   buttons and pills would otherwise make every table row taller. Inside
   tables they keep the pre-restyle metrics; only colour and font change. */
table { line-height: 1.4; }
td .qb-btn, th .qb-btn { height: auto; padding: 7px 16px; font-size: 12px; line-height: 1.4; }
td .qb-btn-small, th .qb-btn-small { padding: 4px 10px; font-size: 11px; }
td .qb-badge, th .qb-badge { height: auto; padding: 2px 8px; font-size: 11px; line-height: 1.4; vertical-align: baseline; }

/* The register's sticky header stuck to the top of the window; the new top
   bar is sticky too, so it sticks just below it instead of underneath. */
.qb-register-table th { top: var(--head-h); }

/* ============================================================
   Themes  (<html data-accent="…">; Ledgerline/teal is the default above)
   Each theme is a full palette, not just an accent: page and card
   surfaces, borders, text tones, the navigation and, for some, corner
   radius. Light rules are scoped to light mode so nothing leaks into dark.
   The attribute keeps its old name so saved choices carry over.
   ============================================================ */

/* Navigation: a dark base tinted toward the accent. Themes set --nav-base. */
:root { --nav-base: #0e182b; }
:root[data-theme="dark"] { --nav-base: #080d16; }
:root:not([data-theme="dark"]) {
    --nav-bg: linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 16%, var(--nav-base)) 0%,
        color-mix(in srgb, var(--accent) 6%, var(--nav-base)) 100%);
    --nav: color-mix(in srgb, var(--accent) 10%, var(--nav-base));
}
:root[data-theme="dark"] {
    --nav-bg: linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 9%, var(--nav-base)) 0%, var(--nav-base) 100%);
    --nav: var(--nav-base);
}

/* -- Harbor (blue) -- */
:root:not([data-theme="dark"])[data-accent="blue"] {
    --canvas: #eef3fa; --paper: #ffffff; --paper-2: #f5f8fc; --paper-3: #e8eef7;
    --ink: #0f1d33; --ink-2: #43546d; --ink-3: #75849a; --rule: #dde5f0; --rule-strong: #c7d3e3;
    --accent: #2160d8; --accent-2: #1a4fb5; --accent-soft: #e2ebfd;
    --nav-base: #0b1a36; --nav-dot: #7fb0ff;
}
:root[data-theme="dark"][data-accent="blue"] {
    --canvas: #09101d; --paper: #101a2c; --paper-2: #142136; --paper-3: #1b2a43;
    --ink: #e6eefa; --ink-2: #a6b6cf; --ink-3: #71819c; --rule: #1f3050; --rule-strong: #2e4368;
    --accent: #6ea6ff; --accent-2: #93bdff; --accent-soft: #14284a; --on-accent: #061633;
    --nav-base: #060c18; --nav-dot: #7fb0ff;
}

/* -- Dusk (indigo) -- */
:root:not([data-theme="dark"])[data-accent="indigo"] {
    --canvas: #f1f1f9; --paper: #ffffff; --paper-2: #f7f7fc; --paper-3: #ebebf6;
    --ink: #16162e; --ink-2: #4a4a6a; --ink-3: #7d7d9a; --rule: #e2e2ef; --rule-strong: #cbcbe1;
    --accent: #4f46e5; --accent-2: #4038c4; --accent-soft: #e8e7fd;
    --nav-base: #15133a; --nav-dot: #a5a0ff;
}
:root[data-theme="dark"][data-accent="indigo"] {
    --canvas: #0c0c1b; --paper: #141429; --paper-2: #191932; --paper-3: #212140;
    --ink: #ebebfa; --ink-2: #b0b0cf; --ink-3: #7a7a9c; --rule: #262649; --rule-strong: #35355e;
    --accent: #9d97ff; --accent-2: #bab6ff; --accent-soft: #221f4f; --on-accent: #120f38;
    --nav-base: #08081a; --nav-dot: #a5a0ff;
}

/* -- Orchid (violet) -- */
:root:not([data-theme="dark"])[data-accent="violet"] {
    --canvas: #f6f1fb; --paper: #ffffff; --paper-2: #faf7fd; --paper-3: #f0e8f8;
    --ink: #1f1430; --ink-2: #55476a; --ink-3: #87799c; --rule: #e9e0f3; --rule-strong: #d5c7e8;
    --accent: #7c3aed; --accent-2: #6a2bd4; --accent-soft: #efe6fe;
    --nav-base: #211137; --nav-dot: #c4a6ff;
}
:root[data-theme="dark"][data-accent="violet"] {
    --canvas: #110b1b; --paper: #191127; --paper-2: #1f1530; --paper-3: #281c3d;
    --ink: #f1eafb; --ink-2: #bcadd3; --ink-3: #85779c; --rule: #2e2145; --rule-strong: #402f5c;
    --accent: #b893ff; --accent-2: #cfb5ff; --accent-soft: #2a1c4c; --on-accent: #1b0b3b;
    --nav-base: #0b0713; --nav-dot: #c4a6ff;
}

/* -- Rosewood (rose) -- */
:root:not([data-theme="dark"])[data-accent="rose"] {
    --canvas: #faf2f3; --paper: #ffffff; --paper-2: #fdf8f8; --paper-3: #f6e9eb;
    --ink: #2a1418; --ink-2: #66474d; --ink-3: #9a7a80; --rule: #f0e0e3; --rule-strong: #e1c9ce;
    --accent: #c42a5c; --accent-2: #a82250; --accent-soft: #fde4ec;
    --nav-base: #2c0e18; --nav-dot: #ff9cbd;
}
:root[data-theme="dark"][data-accent="rose"] {
    --canvas: #160b0f; --paper: #201217; --paper-2: #27161d; --paper-3: #321d25;
    --ink: #fbecef; --ink-2: #d2b0b8; --ink-3: #9b7880; --rule: #3a2028; --rule-strong: #502d38;
    --accent: #ff7aa6; --accent-2: #ff9dbe; --accent-soft: #3f1727; --on-accent: #3a0a1c;
    --nav-base: #0e0609; --nav-dot: #ff9cbd;
}

/* -- Terracotta (orange) -- */
:root:not([data-theme="dark"])[data-accent="orange"] {
    --canvas: #f8f2eb; --paper: #fffdfa; --paper-2: #fbf6f0; --paper-3: #f3eadf;
    --ink: #2a1c12; --ink-2: #64503f; --ink-3: #9a8470; --rule: #ece1d3; --rule-strong: #dbcbb6;
    --accent: #b84f0b; --accent-2: #9a4106; --accent-soft: #fbe8d6;
    --nav-base: #2a180d; --nav-dot: #ffb37a;
}
:root[data-theme="dark"][data-accent="orange"] {
    --canvas: #140f0a; --paper: #1d1610; --paper-2: #241b14; --paper-3: #2e231a;
    --ink: #f8efe6; --ink-2: #cbb8a3; --ink-3: #94806b; --rule: #372a1f; --rule-strong: #4c3a2b;
    --accent: #ffa25a; --accent-2: #ffbb85; --accent-soft: #3a2413; --on-accent: #331702;
    --nav-base: #0d0906; --nav-dot: #ffb37a;
}

/* -- Evergreen (green): neutral greys, charcoal menu, bookkeeping green -- */
:root:not([data-theme="dark"])[data-accent="green"] {
    --canvas: #f3f4f6; --paper: #ffffff; --paper-2: #f8f9fa; --paper-3: #eceef1;
    --ink: #1f2124; --ink-2: #4f5359; --ink-3: #868a91; --rule: #e2e4e7; --rule-strong: #c8cbd0;
    --accent: #1a7f12; --accent-2: #13670c; --accent-soft: #e2f3de;
    --nav-base: #2a2b2e; --nav-dot: #6ccf3f;
}
:root[data-theme="dark"][data-accent="green"] {
    --canvas: #0e1011; --paper: #16181a; --paper-2: #1b1e20; --paper-3: #232629;
    --ink: #eceef0; --ink-2: #b0b5ba; --ink-3: #7c8288; --rule: #2a2e32; --rule-strong: #3a3f44;
    --accent: #6ccf57; --accent-2: #8ddc7c; --accent-soft: #16301a; --on-accent: #0a2006;
    --nav-base: #0a0b0c; --nav-dot: #6ccf57;
}

/* -- Graphite: monochrome, light menu, tighter corners -- */
:root[data-accent="graphite"] { --radius-card: 8px; --radius-ctl: 6px; --radius-sm: 5px; }
:root:not([data-theme="dark"])[data-accent="graphite"] {
    --canvas: #f4f4f5; --paper: #ffffff; --paper-2: #fafafa; --paper-3: #f0f0f2;
    --ink: #18181b; --ink-2: #52525b; --ink-3: #85858e; --rule: #e4e4e7; --rule-strong: #cfcfd5;
    --accent: #27272a; --accent-2: #09090b; --accent-soft: #ececef;
    --nav-base: #18181b;
    --nav-bg: #fafafa; --nav-border: #e4e4e7;
    --nav-ink: #3f3f46; --nav-dim: #71717a; --nav-strong: #09090b;
    --nav-hover: rgba(0, 0, 0, .04); --nav-active: rgba(0, 0, 0, .07);
    --nav-line: rgba(0, 0, 0, .06); --nav-field: #ffffff; --nav-field-line: #e4e4e7;
    --nav-dot: #27272a;
}
:root[data-theme="dark"][data-accent="graphite"] {
    --canvas: #09090b; --paper: #131316; --paper-2: #18181b; --paper-3: #202024;
    --ink: #f4f4f5; --ink-2: #b4b4bb; --ink-3: #7c7c85; --rule: #27272a; --rule-strong: #3a3a40;
    --accent: #e4e4e7; --accent-2: #fafafa; --accent-soft: #26262b; --on-accent: #09090b;
    --nav-base: #09090b; --nav-bg: #0c0c0e; --nav-dot: #e4e4e7;
}

/* -- Paper (sand): warm cream ledger, light menu, soft corners -- */
:root[data-accent="sand"] { --radius-card: 14px; --radius-ctl: 9px; --radius-sm: 8px; }
:root:not([data-theme="dark"])[data-accent="sand"] {
    --canvas: #f4efe4; --paper: #fffdf7; --paper-2: #faf6ed; --paper-3: #f0e9da;
    --ink: #2b2418; --ink-2: #5f5444; --ink-3: #928670; --rule: #e7ddcb; --rule-strong: #d4c7af;
    --accent: #7a5a17; --accent-2: #624711; --accent-soft: #f2e8cf;
    --nav-base: #2b2418;
    --nav-bg: linear-gradient(180deg, #efe6d4 0%, #ebe1cd 100%); --nav-border: #e0d5c0;
    --nav-ink: #4a3f2e; --nav-dim: #877a62; --nav-strong: #231c10;
    --nav-hover: rgba(70, 48, 10, .05); --nav-active: rgba(70, 48, 10, .09);
    --nav-line: rgba(70, 48, 10, .08); --nav-field: #fffdf7; --nav-field-line: #dccfb7;
    --nav-dot: #b8862b;
    --shadow-1: 0 1px 2px rgba(60, 40, 10, .06), 0 1px 1px rgba(60, 40, 10, .03);
    --shadow-2: 0 1px 2px rgba(60, 40, 10, .06), 0 10px 30px -14px rgba(60, 40, 10, .22);
}
:root[data-theme="dark"][data-accent="sand"] {
    --canvas: #14120d; --paper: #1c1913; --paper-2: #221f18; --paper-3: #2b271f;
    --ink: #f3ecdd; --ink-2: #c4b9a3; --ink-3: #8e836d; --rule: #322d23; --rule-strong: #453e30;
    --accent: #e0b860; --accent-2: #ecca82; --accent-soft: #352b14; --on-accent: #241a04;
    --nav-base: #0e0c08; --nav-dot: #e0b860;
}

/* -- High contrast: black and white, strong borders, square corners -- */
:root[data-accent="contrast"] { --radius-card: 4px; --radius-ctl: 4px; --radius-sm: 3px; }
:root:not([data-theme="dark"])[data-accent="contrast"] {
    --canvas: #f0f0f0; --paper: #ffffff; --paper-2: #f6f6f6; --paper-3: #e6e6e6;
    --ink: #000000; --ink-2: #1f1f1f; --ink-3: #4a4a4a; --rule: #a6a6a6; --rule-strong: #595959;
    --accent: #0040c1; --accent-2: #00309a; --accent-soft: #dce6fb;
    --nav-base: #000000; --nav-bg: #000000;
    --nav-ink: #ffffff; --nav-dim: #d4d4d4; --nav-dot: #ffd400;
    --nav-hover: rgba(255, 255, 255, .12); --nav-active: rgba(255, 255, 255, .2);
    --shadow-1: 0 0 0 1px rgba(0, 0, 0, .08); --shadow-2: 0 0 0 1px rgba(0, 0, 0, .1), 0 6px 16px -8px rgba(0, 0, 0, .3);
    --focus-ring: 0 0 0 3px #ffd400, 0 0 0 5px #000;
}
:root[data-theme="dark"][data-accent="contrast"] {
    --canvas: #000000; --paper: #0a0a0a; --paper-2: #121212; --paper-3: #1c1c1c;
    --ink: #ffffff; --ink-2: #e6e6e6; --ink-3: #bdbdbd; --rule: #6b6b6b; --rule-strong: #a3a3a3;
    --accent: #ffd400; --accent-2: #ffe24d; --accent-soft: #332b00; --on-accent: #000000;
    --nav-base: #000000; --nav-bg: #000000; --nav-border: #6b6b6b;
    --nav-ink: #ffffff; --nav-dim: #d4d4d4; --nav-dot: #ffd400;
    --nav-hover: rgba(255, 255, 255, .12); --nav-active: rgba(255, 255, 255, .2);
    --focus-ring: 0 0 0 3px #ffd400;
}

/* ============================================================
   Theme styles
   Beyond colour, each theme has its own character: type, card and
   button shape, depth, tables, page backdrop and menu highlight.
   Rules are scoped by :root[data-accent] so they outrank qb.css.
   ============================================================ */
:root {
    --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'DejaVu Serif', serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
}

/* -- Ledgerline: crisp fintech. Gradient buttons, accent rail in the menu,
      tinted card headers. Also the default when no theme is saved. -- */
:root:is(:not([data-accent]), [data-accent="teal"]) .qb-btn-primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 100%);
}
:root:is(:not([data-accent]), [data-accent="teal"]) .qb-btn-primary:hover { background: var(--accent-2); }
:root:is(:not([data-accent]), [data-accent="teal"]) .qb-card-header { background: linear-gradient(180deg, var(--paper-2), var(--paper)); }
:root:is(:not([data-accent]), [data-accent="teal"]) .ll-nav-row.is-active { box-shadow: inset 3px 0 0 var(--nav-dot); }
:root:is(:not([data-accent]), [data-accent="teal"]) .ll-kpi-value { color: var(--ink); }

/* -- Harbor: airy glass. Soft blue light on the page, frosted cards with
      no hard borders, deep diffuse shadows, pill menu highlight. -- */
:root[data-accent="blue"] { --radius-card: 16px; --radius-ctl: 10px; --radius-sm: 9px; }
:root[data-accent="blue"] body {
    background:
        radial-gradient(900px 520px at 85% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%) fixed no-repeat,
        radial-gradient(700px 500px at -5% 105%, color-mix(in srgb, #38bdf8 12%, transparent), transparent 70%) fixed no-repeat,
        var(--canvas);
}
:root[data-accent="blue"] :is(.qb-card, .ll-kpi, .ll-flow, .ll-stat, .qb-stat-card, .ll-home-launch) {
    background: color-mix(in srgb, var(--paper) 78%, transparent);
    border-color: color-mix(in srgb, var(--rule) 55%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset, 0 18px 40px -24px color-mix(in srgb, var(--accent) 45%, rgba(0, 0, 0, .4));
}
:root[data-accent="blue"] .qb-card-header { background: transparent; }
:root[data-accent="blue"] .ll-kpi::before { inset: auto 18px 0 18px; height: 3px; border-radius: 3px 3px 0 0; }
:root[data-accent="blue"] .ll-nav-row.is-active,
:root[data-accent="blue"] .ll-sublink.is-active { background: color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 999px; }
:root[data-accent="blue"] .qb-btn { border-radius: 999px; }
:root[data-accent="blue"] .ll-tile-ico, :root[data-accent="blue"] .ll-kpi-ico { border-radius: 50%; }

/* -- Dusk: twilight. The welcome banner and buttons glow indigo to violet,
      KPI stripes are gradients, headings are heavier. -- */
:root[data-accent="indigo"] { --radius-card: 14px; --dusk: linear-gradient(120deg, var(--accent) 0%, #8b5cf6 55%, #c026d3 100%); }
:root[data-theme="dark"][data-accent="indigo"] { --dusk: linear-gradient(120deg, #4f46e5 0%, #7c3aed 55%, #a21caf 100%); }
:root[data-accent="indigo"] .ll-hero {
    padding: 26px 28px;
    border-radius: 18px;
    background: var(--dusk);
    box-shadow: 0 22px 44px -26px #4f46e5;
}
:root[data-accent="indigo"] .ll-hero :is(h1, p, .ll-hero-eyebrow) { color: #fff; }
:root[data-accent="indigo"] .ll-hero p { opacity: .82; }
:root[data-accent="indigo"] .ll-hero :is(.qb-btn, .ll-quick) { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); box-shadow: none; color: #fff; }
:root[data-accent="indigo"] .ll-hero :is(.qb-btn, .ll-quick):hover { background: rgba(255, 255, 255, .26); color: #fff; }
:root[data-accent="indigo"] .ll-hero :is(.qb-btn, .ll-quick) :is(i, .ll-icon) { color: #fff; }
:root[data-accent="indigo"] .qb-btn-primary { background: var(--dusk); border-color: transparent; color: #fff; }
:root[data-accent="indigo"] .qb-btn-primary:hover { filter: brightness(1.08); background: var(--dusk); color: #fff; }
:root[data-accent="indigo"] .ll-kpi::before { height: 4px; background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 30%, #c026d3)); }
:root[data-accent="indigo"] :is(.ll-hero h1, .ll-page-title, .ll-page-header h2) { font-weight: 700; letter-spacing: -.025em; }
:root[data-accent="indigo"] .ll-nav-row.is-active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent); }
:root[data-accent="indigo"] .ll-logo { background: var(--dusk); color: #fff; }

/* -- Orchid: soft and round. Big radii, pill controls, round icons,
      a blush glow in the corner of the page. -- */
:root[data-accent="violet"] { --radius-card: 22px; --radius-ctl: 999px; --radius-sm: 12px; }
:root[data-accent="violet"] body {
    background:
        radial-gradient(800px 480px at 100% 0%, color-mix(in srgb, #f472b6 14%, transparent), transparent 70%) fixed no-repeat,
        radial-gradient(800px 480px at 0% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%) fixed no-repeat,
        var(--canvas);
}
:root[data-accent="violet"] :is(.qb-card, .ll-kpi, .ll-flow, .ll-stat, .qb-stat-card) { border-color: transparent; box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--accent) 50%, rgba(0, 0, 0, .3)); }
:root[data-accent="violet"] .qb-card-header { border-bottom-color: color-mix(in srgb, var(--accent) 12%, var(--rule)); }
:root[data-accent="violet"] :is(.ll-kpi-ico, .ll-tile-ico, .ll-tn-ico, .ll-logo, .ll-avatar) { border-radius: 50%; }
:root[data-accent="violet"] .ll-kpi::before { display: none; }
:root[data-accent="violet"] .ll-kpi-value { color: var(--tone); }
:root[data-accent="violet"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-radius: 12px; }
:root[data-accent="violet"] :is(.ll-nav-row, .ll-sublink) { border-radius: 999px; }
:root[data-accent="violet"] .ll-sublink.is-active { background: color-mix(in srgb, var(--accent) 40%, transparent); }

/* -- Rosewood: editorial. Serif headings and figures, hairline rules,
      no drop shadows, small-caps section titles. -- */
:root[data-accent="rose"] { --radius-card: 6px; --radius-ctl: 6px; --radius-sm: 5px; --shadow-1: none; }
:root[data-accent="rose"] :is(.ll-hero h1, .ll-page-title, .ll-page-header h2, .qb-page-header h2, .qb-center-header h2, .qb-txn-header h2, .qb-admin-header h2, .qb-detail-header h2, .qb-coa-header h2, .qb-register-header h2) {
    font-family: var(--font-serif); font-weight: 600; letter-spacing: 0; font-size: 30px;
}
:root[data-accent="rose"] .ll-hero-eyebrow { font-family: var(--font-serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 14px; }
:root[data-accent="rose"] :is(.ll-kpi-value, .ll-stat-value, .qb-stat-value) { font-family: var(--font-serif); font-weight: 600; font-size: 26px; }
:root[data-accent="rose"] :is(.qb-card-header, .ll-flow-title) { font-variant: small-caps; letter-spacing: .06em; font-size: 15px; }
:root[data-accent="rose"] .ll-hero { padding-bottom: 18px; border-bottom: 1px solid var(--rule-strong); }
:root[data-accent="rose"] .ll-kpi::before { inset: auto 0 0 0; height: 1px; background: var(--tone); }
:root[data-accent="rose"] .qb-table th { background: transparent; border-bottom: 1px solid var(--ink-3); }
:root[data-accent="rose"] .ll-nav-row.is-active .ll-label { font-family: var(--font-serif); font-style: italic; font-size: 14.5px; }

/* -- Terracotta: bold and earthy. Heavy outlines with hard offset
      shadows, chunky type, uppercase card titles. -- */
:root[data-accent="orange"] { --radius-card: 10px; --radius-ctl: 8px; --tc-line: color-mix(in srgb, var(--ink) 80%, var(--accent)); }
:root[data-accent="orange"] :is(.qb-card, .ll-kpi, .ll-flow, .ll-stat, .qb-stat-card, .ll-home-launch) {
    border: 1.5px solid var(--tc-line);
    box-shadow: 4px 4px 0 var(--tc-line);
}
:root[data-accent="orange"] :is(a.ll-kpi, a.ll-stat, a.qb-stat-card):hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tc-line); border-color: var(--tc-line); }
:root[data-accent="orange"] .qb-card-header, :root[data-accent="orange"] .ll-flow-head { border-bottom: 1.5px solid var(--tc-line); }
:root[data-accent="orange"] :is(.qb-card-header, .ll-flow-title) { text-transform: uppercase; letter-spacing: .07em; font-size: 12.5px; font-weight: 700; }
:root[data-accent="orange"] .qb-btn { border-width: 1.5px; border-color: var(--tc-line); font-weight: 650; }
:root[data-accent="orange"] .qb-btn-primary { box-shadow: 3px 3px 0 var(--tc-line); }
:root[data-accent="orange"] .qb-btn-primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tc-line); }
:root[data-accent="orange"] .ll-kpi::before { display: none; }
:root[data-accent="orange"] .ll-kpi-ico { border: 1.5px solid var(--tc-line); }
:root[data-accent="orange"] :is(.ll-hero h1, .ll-page-title, .ll-page-header h2, .ll-kpi-value) { font-weight: 700; letter-spacing: -.03em; }
:root[data-accent="orange"] .qb-table th { background: var(--accent-soft); color: var(--ink); border-bottom: 1.5px solid var(--tc-line); }
:root[data-accent="orange"] .ll-nav-row.is-active { background: var(--accent); color: var(--on-accent); }
:root[data-accent="orange"] .ll-nav-row.is-active .ll-icon { color: var(--on-accent); }

/* -- Evergreen: classic desktop accounting. Compact, squared off, green
      table headers, zebra rows, solid green menu highlight. -- */
:root[data-accent="green"] { --radius-card: 4px; --radius-ctl: 4px; --radius-sm: 3px; --font: 'Segoe UI', 'IBM Plex Sans', system-ui, sans-serif; }
:root[data-accent="green"] body { background: var(--canvas); }
:root[data-accent="green"] .qb-table th { background: var(--accent); color: var(--on-accent); border-bottom: 0; letter-spacing: .02em; }
:root[data-accent="green"] .qb-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--accent-soft) 45%, var(--paper)); }
:root[data-accent="green"] .qb-table tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 90%, var(--paper)); }
:root[data-accent="green"] .qb-table td { padding-top: 6px; padding-bottom: 6px; }
:root[data-accent="green"] .qb-card-header { background: var(--paper-3); padding-top: 10px; padding-bottom: 10px; font-size: 13px; }
:root[data-accent="green"] .ll-flow-head { background: var(--paper-3); }
:root[data-accent="green"] .ll-kpi::before { inset: 0 auto 0 0; width: 4px; height: auto; }
:root[data-accent="green"] .ll-nav-row.is-active { background: var(--accent); color: #fff; }
:root[data-accent="green"] .ll-nav-row.is-active .ll-icon { color: #fff; }
:root[data-accent="green"] .ll-sublink.is-active { box-shadow: inset 3px 0 0 var(--nav-dot); }
:root[data-accent="green"] :is(.ll-kpi-ico, .ll-tile-ico, .ll-tn-ico) { border-radius: 4px; }

/* -- Graphite: minimal. Flat, hairlines only, monospace figures, tiny
      uppercase labels, a black rule marks the current menu item. -- */
:root[data-accent="graphite"] { --shadow-1: none; --shadow-2: 0 0 0 1px var(--rule-strong); }
:root[data-accent="graphite"] body { background: var(--canvas); }
:root[data-accent="graphite"] :is(.ll-kpi-value, .ll-stat-value, .qb-stat-value, .qb-table td.text-right, .qb-table td.qb-amount, .qb-amount) { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.02em; }
:root[data-accent="graphite"] :is(.qb-card-header, .ll-flow-title, .ll-kpi-top) { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 600; color: var(--ink-2); }
:root[data-accent="graphite"] .ll-kpi::before { display: none; }
:root[data-accent="graphite"] :is(.ll-kpi-ico, .ll-tile-ico, .ll-tn-ico) { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-strong); }
:root[data-accent="graphite"] .ll-steps.is-flow .ll-step + .ll-step::before { background: var(--rule-strong); height: 1px; }
:root[data-accent="graphite"] :is(.ll-hero h1, .ll-page-title, .ll-page-header h2) { font-weight: 500; letter-spacing: -.035em; }
:root[data-accent="graphite"] .ll-hero-eyebrow { color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0; }
:root[data-accent="graphite"] .ll-nav-row.is-active { background: transparent; box-shadow: inset 2px 0 0 var(--nav-strong); border-radius: 0; font-weight: 600; }
:root[data-accent="graphite"] .qb-table th { background: transparent; border-bottom-width: 1px; }

/* -- Paper: ledger book. Serif headings, ruled ledger lines with a red
      margin, double-ruled table headers, paper grain on the page. -- */
:root[data-accent="sand"] { --ledger-line: color-mix(in srgb, #5b8fc7 22%, transparent); --ledger-margin: color-mix(in srgb, #c0392b 45%, transparent); }
:root[data-theme="dark"][data-accent="sand"] { --ledger-line: color-mix(in srgb, #8fb3db 12%, transparent); --ledger-margin: color-mix(in srgb, #e57368 35%, transparent); }
:root[data-accent="sand"] body {
    background:
        repeating-radial-gradient(circle at 30% 20%, transparent 0 2px, color-mix(in srgb, var(--ink) 1.5%, transparent) 2px 3px),
        var(--canvas);
}
:root[data-accent="sand"] :is(.ll-hero h1, .ll-page-title, .ll-page-header h2, .qb-page-header h2, .qb-center-header h2, .qb-txn-header h2, .qb-admin-header h2, .qb-detail-header h2, .qb-coa-header h2, .qb-register-header h2, .qb-card-header, .ll-flow-title, .ll-kpi-value) {
    font-family: var(--font-serif); letter-spacing: 0;
}
:root[data-accent="sand"] :is(.ll-hero h1, .ll-page-title, .ll-page-header h2) { font-size: 30px; font-weight: 600; }
:root[data-accent="sand"] .ll-hero-eyebrow { font-family: var(--font-serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 14px; }
:root[data-accent="sand"] .qb-card-header { font-size: 16px; }
:root[data-accent="sand"] .ll-kpi-value { font-size: 27px; }
:root[data-accent="sand"] :is(.qb-card, .ll-flow, .ll-kpi) { box-shadow: var(--shadow-1), inset 3px 0 0 var(--paper), inset 4px 0 0 var(--ledger-margin), inset 6px 0 0 var(--paper), inset 7px 0 0 var(--ledger-margin); }
:root[data-accent="sand"] .ll-kpi::before { display: none; }
:root[data-accent="sand"] .qb-table th { background: transparent; color: var(--ink-2); border-bottom: 3px double var(--rule-strong); font-family: var(--font-serif); text-transform: none; font-size: 12.5px; font-style: italic; letter-spacing: 0; }
:root[data-accent="sand"] .qb-table td { border-bottom-color: var(--ledger-line); }
:root[data-accent="sand"] .ll-nav-row.is-active { background: var(--paper); box-shadow: 0 1px 2px rgba(60, 40, 10, .1); }
:root[data-theme="dark"][data-accent="sand"] .ll-nav-row.is-active { background: var(--nav-active); box-shadow: none; }
:root[data-accent="sand"] .ll-nav-row.is-active .ll-label { font-family: var(--font-serif); font-size: 14.5px; }

/* -- High contrast: no glows or tints, 2px borders, underlined links,
      bold weights, solid black table headers. -- */
:root[data-accent="contrast"] body { background: var(--canvas); }
:root[data-accent="contrast"] :is(.qb-card, .ll-kpi, .ll-flow, .ll-stat, .qb-stat-card, .ll-home-launch) { border: 2px solid var(--ink); }
:root[data-accent="contrast"] :is(.qb-card-header, .ll-flow-head) { border-bottom: 2px solid var(--ink); font-weight: 700; }
:root[data-accent="contrast"] .qb-main a:not(.qb-btn):not(.ll-step):not(.ll-kpi):not(.ll-stat):not(.qb-stat-card):not(.ll-quick) { text-decoration: underline; text-underline-offset: 2px; }
:root[data-accent="contrast"] .qb-btn { border-width: 2px; font-weight: 700; }
:root[data-accent="contrast"] .qb-table th { background: var(--ink); color: var(--paper); border-bottom: 0; }
:root[data-accent="contrast"] .qb-table td { border-bottom: 1px solid var(--rule-strong); }
:root[data-accent="contrast"] .qb-main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border: 2px solid var(--ink) !important; }
:root[data-accent="contrast"] .ll-kpi::before { height: 6px; }
:root[data-accent="contrast"] .ll-nav-row.is-active { background: var(--nav-dot); color: #000; font-weight: 700; }
:root[data-accent="contrast"] .ll-nav-row.is-active .ll-icon { color: #000; }
:root[data-accent="contrast"] .ll-sublink.is-active { text-decoration: underline; text-underline-offset: 3px; }

/* Theme cards in the Appearance panel: a miniature of each palette in the
   current mode (menu, page, card, accent). */
.sw-teal     { --p-nav: #0f2230; --p-canvas: #f3f5f9; --p-paper: #fff;    --p-rule: #e4e8ef; --sw: #0a7d68; }
.sw-blue     { --p-nav: #0f2347; --p-canvas: #eef3fa; --p-paper: #fff;    --p-rule: #dde5f0; --sw: #2160d8; }
.sw-indigo   { --p-nav: #1d1a4e; --p-canvas: #f1f1f9; --p-paper: #fff;    --p-rule: #e2e2ef; --sw: #4f46e5; }
.sw-violet   { --p-nav: #2b1548; --p-canvas: #f6f1fb; --p-paper: #fff;    --p-rule: #e9e0f3; --sw: #7c3aed; }
.sw-rose     { --p-nav: #3a1121; --p-canvas: #faf2f3; --p-paper: #fff;    --p-rule: #f0e0e3; --sw: #c42a5c; }
.sw-orange   { --p-nav: #371e0e; --p-canvas: #f8f2eb; --p-paper: #fffdfa; --p-rule: #ece1d3; --sw: #b84f0b; }
.sw-green    { --p-nav: #2b332c; --p-canvas: #f3f4f6; --p-paper: #fff;    --p-rule: #e2e4e7; --sw: #1a7f12; }
.sw-graphite { --p-nav: #fafafa; --p-canvas: #f4f4f5; --p-paper: #fff;    --p-rule: #e4e4e7; --sw: #27272a; }
.sw-sand     { --p-nav: #ece3d0; --p-canvas: #f4efe4; --p-paper: #fffdf7; --p-rule: #e7ddcb; --sw: #7a5a17; }
.sw-contrast { --p-nav: #000;    --p-canvas: #f0f0f0; --p-paper: #fff;    --p-rule: #8c8c8c; --sw: #0040c1; }
:root[data-theme="dark"] .sw-teal     { --p-nav: #0a141a; --p-canvas: #0b111b; --p-paper: #121a27; --p-rule: #223047; --sw: #3ec2a5; }
:root[data-theme="dark"] .sw-blue     { --p-nav: #060c18; --p-canvas: #09101d; --p-paper: #101a2c; --p-rule: #1f3050; --sw: #6ea6ff; }
:root[data-theme="dark"] .sw-indigo   { --p-nav: #08081a; --p-canvas: #0c0c1b; --p-paper: #141429; --p-rule: #262649; --sw: #9d97ff; }
:root[data-theme="dark"] .sw-violet   { --p-nav: #0b0713; --p-canvas: #110b1b; --p-paper: #191127; --p-rule: #2e2145; --sw: #b893ff; }
:root[data-theme="dark"] .sw-rose     { --p-nav: #0e0609; --p-canvas: #160b0f; --p-paper: #201217; --p-rule: #3a2028; --sw: #ff7aa6; }
:root[data-theme="dark"] .sw-orange   { --p-nav: #0d0906; --p-canvas: #140f0a; --p-paper: #1d1610; --p-rule: #372a1f; --sw: #ffa25a; }
:root[data-theme="dark"] .sw-green    { --p-nav: #0a0b0c; --p-canvas: #0e1011; --p-paper: #16181a; --p-rule: #2a2e32; --sw: #6ccf57; }
:root[data-theme="dark"] .sw-graphite { --p-nav: #0c0c0e; --p-canvas: #09090b; --p-paper: #131316; --p-rule: #27272a; --sw: #e4e4e7; }
:root[data-theme="dark"] .sw-sand     { --p-nav: #0e0c08; --p-canvas: #14120d; --p-paper: #1c1913; --p-rule: #322d23; --sw: #e0b860; }
:root[data-theme="dark"] .sw-contrast { --p-nav: #000;    --p-canvas: #000;    --p-paper: #0a0a0a; --p-rule: #6b6b6b; --sw: #ffd400; }

/* Colour tones for launcher tiles and menu icons. */
.tone-accent { --tone: var(--accent); --tone-soft: var(--accent-soft); }
.tone-green  { --tone: var(--ok);     --tone-soft: var(--ok-soft); }
.tone-amber  { --tone: var(--amber);  --tone-soft: var(--amber-soft); }
.tone-blue   { --tone: var(--blue);   --tone-soft: var(--blue-soft); }
.tone-violet { --tone: var(--violet); --tone-soft: var(--violet-soft); }
.tone-rose   { --tone: var(--rose);   --tone-soft: var(--rose-soft); }
.tone-slate  { --tone: var(--slate);  --tone-soft: var(--slate-soft); }

/* ============================================================
   WCAG 2.1 AA: each theme's text-carrying tokens, moved the least it takes to reach
   4.5:1 on the surfaces they sit on. Generated from a measurement of every theme; hue kept.
   ============================================================ */
:root:not([data-theme="dark"]):is(:not([data-accent]), [data-accent="teal"]) { --ink-3: #636c7b; --accent: #0a7965; --red: #c0352b; --amber: #9c5e00; --ok: #1a7a4d; --rose: #ba3467; }
:root[data-theme="dark"]:is(:not([data-accent]), [data-accent="teal"]) { --ink-3: #8791a5; }
:root:not([data-theme="dark"])[data-accent="blue"] { --ink-3: #5f6b7d; --red: #c0352b; --amber: #995b00; --ok: #1a794c; --rose: #ba3467; }
:root[data-theme="dark"][data-accent="blue"] { --ink-3: #8593aa; }
:root:not([data-theme="dark"])[data-accent="indigo"] { --ink-3: #67677e; --red: #c0352b; --amber: #995b00; --ok: #19774c; --rose: #ba3467; }
:root[data-theme="dark"][data-accent="indigo"] { --ink-3: #8a8aa8; }
:root:not([data-theme="dark"])[data-accent="violet"] { --ink-3: #6f6380; --red: #c0352b; --amber: #975a00; --ok: #19774c; --rose: #ba3467; }
:root[data-theme="dark"][data-accent="violet"] { --ink-3: #9185a6; }
:root:not([data-theme="dark"])[data-accent="rose"] { --ink-3: #7d6368; --accent: #c22a5b; --red: #c0352b; --amber: #995b00; --ok: #19774c; --rose: #ba3467; }
:root[data-theme="dark"][data-accent="rose"] { --ink-3: #a3838a; }
:root:not([data-theme="dark"])[data-accent="orange"] { --ink-3: #776656; --accent: #ad4a0a; --red: #c0352b; --amber: #975a00; --ok: #19774c; --rose: #ba3467; }
:root[data-theme="dark"][data-accent="orange"] { --ink-3: #9d8a77; }
:root:not([data-theme="dark"])[data-accent="green"] { --ink-3: #676a70; --accent: #197b11; --red: #c0352b; --amber: #995b00; --ok: #1a794c; --rose: #ba3467; }
:root[data-theme="dark"][data-accent="green"] { --ink-3: #898e94; }
:root:not([data-theme="dark"])[data-accent="graphite"] { --ink-3: #6a6a72; --red: #c0352b; --amber: #9c5e00; --ok: #1a7a4d; --rose: #ba3467; }
:root[data-theme="dark"][data-accent="graphite"] { --ink-3: #888890; }
:root:not([data-theme="dark"])[data-accent="sand"] { --ink-3: #6f6655; --red: #be342b; --amber: #955900; --ok: #19764b; --rose: #b83366; }
:root[data-theme="dark"][data-accent="sand"] { --ink-3: #988e7a; }
:root:not([data-theme="dark"])[data-accent="contrast"] { --red: #ba332a; --amber: #935800; --ok: #19744a; --rose: #b63365; --violet: #6c49de; }

/* Where a theme paints text on its own gradient or solid menu highlight */
:root:is(:not([data-accent]), [data-accent="teal"]) .qb-btn-primary { background: var(--accent); }
:root:is(:not([data-accent]), [data-accent="teal"]) .qb-btn-primary:hover { background: var(--accent-2); }
:root[data-accent="green"] .ll-nav-row.is-active, :root[data-accent="green"] .ll-nav-row.is-active .ll-icon { color: var(--on-accent); }
:root[data-accent="green"] { --nav-dim: #a9b6cc; }
:root:not([data-theme="dark"])[data-accent="sand"] { --nav-dim: #5a4e3a; }
:root[data-accent="indigo"] { --dusk: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%); }
:root[data-accent="indigo"] .ll-hero p { opacity: 1; }
:root[data-accent="indigo"] .ll-hero :is(.qb-btn, .ll-quick) { background: rgba(0, 0, 0, .18); }