/*
 * Ledger design tokens — single source of truth for Quovenda's UI.
 * Every other stylesheet (Bootstrap theme, components, charts, documents) reads these.
 */
:root {
    /* Brand */
    --q-primary: #4338ca;
    --q-primary-hover: #3730a3;
    --q-primary-active: #312e81;
    --q-primary-subtle: #eef2ff;
    --q-primary-border: #c7d2fe;
    --q-primary-rgb: 67, 56, 202;

    /* Neutrals (slate) */
    --q-gray-25: #fcfcfd;
    --q-gray-50: #f8fafc;
    --q-gray-100: #f1f5f9;
    --q-gray-200: #e2e8f0;
    --q-gray-300: #cbd5e1;
    --q-gray-400: #94a3b8;
    --q-gray-500: #64748b;
    --q-gray-600: #475569;
    --q-gray-700: #334155;
    --q-gray-800: #1e293b;
    --q-gray-900: #0f172a;

    /* Roles */
    --q-fg: var(--q-gray-900);
    --q-fg-secondary: var(--q-gray-700);
    --q-fg-muted: var(--q-gray-500);
    --q-fg-disabled: var(--q-gray-400);
    --q-border: var(--q-gray-200);
    --q-border-strong: var(--q-gray-300);
    --q-surface: #ffffff;
    --q-surface-raised: #ffffff;
    --q-surface-sunken: var(--q-gray-50);
    --q-canvas: var(--q-gray-50);
    --q-hover: var(--q-gray-100);

    /* Status */
    --q-success: #15803d;
    --q-success-subtle: #f0fdf4;
    --q-success-border: #bbf7d0;
    --q-warning: #b45309;
    --q-warning-subtle: #fffbeb;
    --q-warning-border: #fde68a;
    --q-danger: #b91c1c;
    --q-danger-subtle: #fef2f2;
    --q-danger-border: #fecaca;
    --q-info: #0369a1;
    --q-info-subtle: #f0f9ff;
    --q-info-border: #bae6fd;

    /* Typography */
    /* Inter (variable, optical sizing): large sizes switch to the Display cut automatically */
    --q-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --q-font-display: var(--q-font-sans);
    --q-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* cv05 = "l" with a tail, so 1 / l / I are distinguishable in codes and names */
    --q-font-features: "cv05";
    /* Numbers: tabular (columns line up) + slashed zero (0 vs O in SKUs and document numbers) */
    --q-font-features-numeric: "cv05", "tnum", "zero";

    --q-text-xs: 0.75rem;    /* 12 */
    --q-text-sm: 0.8125rem;  /* 13 */
    --q-text-base: 0.875rem; /* 14 */
    --q-text-md: 1rem;       /* 16 */
    --q-text-lg: 1.25rem;    /* 20 */
    --q-text-xl: 1.5rem;     /* 24 */
    --q-text-2xl: 1.875rem;  /* 30 */
    --q-text-3xl: 2.25rem;   /* 36 */

    --q-leading-tight: 1.2;
    --q-leading-snug: 1.35;
    --q-leading-normal: 1.5;
    --q-leading-relaxed: 1.65;

    /* Tighter tracking as size grows; open tracking for small caps labels */
    --q-tracking-display: -0.025em;
    --q-tracking-heading: -0.018em;
    --q-tracking-title: -0.01em;
    --q-tracking-normal: 0;
    --q-tracking-caps: 0.06em;

    --q-weight-regular: 400;
    --q-weight-medium: 500;
    --q-weight-semibold: 600;
    --q-weight-bold: 700;

    /* Space (4px grid) */
    --q-space-1: 0.25rem;
    --q-space-2: 0.5rem;
    --q-space-3: 0.75rem;
    --q-space-4: 1rem;
    --q-space-5: 1.5rem;
    --q-space-6: 2rem;
    --q-space-7: 3rem;

    /* Shape */
    --q-radius-sm: 6px;
    --q-radius-md: 8px;
    --q-radius-lg: 12px;
    --q-radius-pill: 999px;

    /* Elevation: 0 = border only, 1 = floating, 2 = modal */
    --q-shadow-1: 0 4px 12px rgb(15 23 42 / 0.08);
    --q-shadow-2: 0 12px 32px rgb(15 23 42 / 0.16);
    --q-focus-ring: 0 0 0 3px rgba(var(--q-primary-rgb), 0.25);

    /* Density */
    --q-control-height: 36px;
    --q-row-height: 40px;

    /* Motion */
    --q-duration: 150ms;
    --q-ease: cubic-bezier(0.2, 0, 0, 1);

    /* Shell */
    --q-sidebar-width: 300px;
    --q-sidebar-collapsed-width: 72px;
    --q-topbar-height: 56px;
}

/*
 * Switchable design systems. <html data-q-theme="…"> selects one for the whole app (set from localStorage
 * before paint by ledgerStyles.ejs / ledgerPublic.ejs); any element can carry it to preview a theme locally.
 * Ledger is the default when no attribute is set. --q-font-display styles headings (serif in Folio).
 */
[data-q-theme="ledger"] {
    --q-primary: #4338ca;
    --q-primary-hover: #3730a3;
    --q-primary-active: #312e81;
    --q-primary-subtle: #eef2ff;
    --q-primary-border: #c7d2fe;
    --q-primary-rgb: 67, 56, 202;
    --q-gray-25: #fcfcfd;
    --q-gray-50: #f8fafc;
    --q-gray-100: #f1f5f9;
    --q-gray-200: #e2e8f0;
    --q-gray-300: #cbd5e1;
    --q-gray-400: #94a3b8;
    --q-gray-500: #64748b;
    --q-gray-600: #475569;
    --q-gray-700: #334155;
    --q-gray-800: #1e293b;
    --q-gray-900: #0f172a;
    --q-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --q-font-display: var(--q-font-sans);
    --q-radius-sm: 6px;
    --q-radius-md: 8px;
    --q-radius-lg: 12px;

    /* Roles are re-declared so a scoped preview (e.g. a UI kit card) resolves them against this theme */
    --q-fg: var(--q-gray-900);
    --q-fg-secondary: var(--q-gray-700);
    --q-fg-muted: var(--q-gray-500);
    --q-fg-disabled: var(--q-gray-400);
    --q-border: var(--q-gray-200);
    --q-border-strong: var(--q-gray-300);
    --q-surface-sunken: var(--q-gray-50);
    --q-canvas: var(--q-gray-50);
    --q-hover: var(--q-gray-100);
    --q-focus-ring: 0 0 0 3px rgba(var(--q-primary-rgb), 0.25);
}

[data-q-theme="graphite"] {
    --q-primary: #18181b;
    --q-primary-hover: #27272a;
    --q-primary-active: #09090b;
    --q-primary-subtle: #f4f4f5;
    --q-primary-border: #d4d4d8;
    --q-primary-rgb: 24, 24, 27;
    --q-gray-25: #fcfcfc;
    --q-gray-50: #fafafa;
    --q-gray-100: #f4f4f5;
    --q-gray-200: #e4e4e7;
    --q-gray-300: #d4d4d8;
    --q-gray-400: #a1a1aa;
    --q-gray-500: #71717a;
    --q-gray-600: #52525b;
    --q-gray-700: #3f3f46;
    --q-gray-800: #27272a;
    --q-gray-900: #18181b;
    --q-font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --q-font-display: var(--q-font-sans);
    --q-radius-sm: 4px;
    --q-radius-md: 6px;
    --q-radius-lg: 8px;

    /* Roles are re-declared so a scoped preview (e.g. a UI kit card) resolves them against this theme */
    --q-fg: var(--q-gray-900);
    --q-fg-secondary: var(--q-gray-700);
    --q-fg-muted: var(--q-gray-500);
    --q-fg-disabled: var(--q-gray-400);
    --q-border: var(--q-gray-200);
    --q-border-strong: var(--q-gray-300);
    --q-surface-sunken: var(--q-gray-50);
    --q-canvas: var(--q-gray-50);
    --q-hover: var(--q-gray-100);
    --q-focus-ring: 0 0 0 3px rgba(var(--q-primary-rgb), 0.25);
}

[data-q-theme="harbor"] {
    --q-primary: #0f766e;
    --q-primary-hover: #115e59;
    --q-primary-active: #134e4a;
    --q-primary-subtle: #f0fdfa;
    --q-primary-border: #99f6e4;
    --q-primary-rgb: 15, 118, 110;
    --q-gray-25: #fcfcfd;
    --q-gray-50: #f9fafb;
    --q-gray-100: #f3f4f6;
    --q-gray-200: #e5e7eb;
    --q-gray-300: #d1d5db;
    --q-gray-400: #9ca3af;
    --q-gray-500: #6b7280;
    --q-gray-600: #4b5563;
    --q-gray-700: #374151;
    --q-gray-800: #1f2937;
    --q-gray-900: #111827;
    --q-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --q-font-display: var(--q-font-sans);
    --q-radius-sm: 8px;
    --q-radius-md: 10px;
    --q-radius-lg: 14px;

    /* Roles are re-declared so a scoped preview (e.g. a UI kit card) resolves them against this theme */
    --q-fg: var(--q-gray-900);
    --q-fg-secondary: var(--q-gray-700);
    --q-fg-muted: var(--q-gray-500);
    --q-fg-disabled: var(--q-gray-400);
    --q-border: var(--q-gray-200);
    --q-border-strong: var(--q-gray-300);
    --q-surface-sunken: var(--q-gray-50);
    --q-canvas: var(--q-gray-50);
    --q-hover: var(--q-gray-100);
    --q-focus-ring: 0 0 0 3px rgba(var(--q-primary-rgb), 0.25);
}

[data-q-theme="atlas"] {
    --q-primary: #1e40af;
    --q-primary-hover: #1e3a8a;
    --q-primary-active: #172554;
    --q-primary-subtle: #eff6ff;
    --q-primary-border: #bfdbfe;
    --q-primary-rgb: 30, 64, 175;
    --q-gray-25: #fdfdfc;
    --q-gray-50: #fafaf9;
    --q-gray-100: #f5f5f4;
    --q-gray-200: #e7e5e4;
    --q-gray-300: #d6d3d1;
    --q-gray-400: #a8a29e;
    --q-gray-500: #78716c;
    --q-gray-600: #57534e;
    --q-gray-700: #44403c;
    --q-gray-800: #292524;
    --q-gray-900: #1c1917;
    --q-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --q-font-display: var(--q-font-sans);
    --q-radius-sm: 3px;
    --q-radius-md: 4px;
    --q-radius-lg: 6px;

    /* Roles are re-declared so a scoped preview (e.g. a UI kit card) resolves them against this theme */
    --q-fg: var(--q-gray-900);
    --q-fg-secondary: var(--q-gray-700);
    --q-fg-muted: var(--q-gray-500);
    --q-fg-disabled: var(--q-gray-400);
    --q-border: var(--q-gray-200);
    --q-border-strong: var(--q-gray-300);
    --q-surface-sunken: var(--q-gray-50);
    --q-canvas: var(--q-gray-50);
    --q-hover: var(--q-gray-100);
    --q-focus-ring: 0 0 0 3px rgba(var(--q-primary-rgb), 0.25);
}

[data-q-theme="copper"] {
    --q-primary: #9a3412;
    --q-primary-hover: #7c2d12;
    --q-primary-active: #6a2610;
    --q-primary-subtle: #fff7ed;
    --q-primary-border: #fed7aa;
    --q-primary-rgb: 154, 52, 18;
    --q-gray-25: #fdfcfb;
    --q-gray-50: #faf8f5;
    --q-gray-100: #f4f1ec;
    --q-gray-200: #e8e3dc;
    --q-gray-300: #d6cfc5;
    --q-gray-400: #a8a097;
    --q-gray-500: #7a7268;
    --q-gray-600: #5c554d;
    --q-gray-700: #47413b;
    --q-gray-800: #2e2a26;
    --q-gray-900: #1d1a17;
    --q-font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --q-font-display: var(--q-font-sans);
    --q-radius-sm: 8px;
    --q-radius-md: 10px;
    --q-radius-lg: 14px;

    /* Roles are re-declared so a scoped preview (e.g. a UI kit card) resolves them against this theme */
    --q-fg: var(--q-gray-900);
    --q-fg-secondary: var(--q-gray-700);
    --q-fg-muted: var(--q-gray-500);
    --q-fg-disabled: var(--q-gray-400);
    --q-border: var(--q-gray-200);
    --q-border-strong: var(--q-gray-300);
    --q-surface-sunken: var(--q-gray-50);
    --q-canvas: var(--q-gray-50);
    --q-hover: var(--q-gray-100);
    --q-focus-ring: 0 0 0 3px rgba(var(--q-primary-rgb), 0.25);
}

[data-q-theme="sage"] {
    --q-primary: #3f6b57;
    --q-primary-hover: #34594a;
    --q-primary-active: #2a483c;
    --q-primary-subtle: #eef5f1;
    --q-primary-border: #c5dccf;
    --q-primary-rgb: 63, 107, 87;
    --q-gray-25: #fbfcfb;
    --q-gray-50: #f7f8f7;
    --q-gray-100: #eef1ef;
    --q-gray-200: #dfe4e1;
    --q-gray-300: #c6cec9;
    --q-gray-400: #95a19a;
    --q-gray-500: #69766f;
    --q-gray-600: #4f5a54;
    --q-gray-700: #3d4641;
    --q-gray-800: #262d29;
    --q-gray-900: #161b18;
    --q-font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --q-font-display: var(--q-font-sans);
    --q-radius-sm: 6px;
    --q-radius-md: 8px;
    --q-radius-lg: 12px;

    /* Roles are re-declared so a scoped preview (e.g. a UI kit card) resolves them against this theme */
    --q-fg: var(--q-gray-900);
    --q-fg-secondary: var(--q-gray-700);
    --q-fg-muted: var(--q-gray-500);
    --q-fg-disabled: var(--q-gray-400);
    --q-border: var(--q-gray-200);
    --q-border-strong: var(--q-gray-300);
    --q-surface-sunken: var(--q-gray-50);
    --q-canvas: var(--q-gray-50);
    --q-hover: var(--q-gray-100);
    --q-focus-ring: 0 0 0 3px rgba(var(--q-primary-rgb), 0.25);
}

[data-q-theme="plum"] {
    --q-primary: #86198f;
    --q-primary-hover: #701a75;
    --q-primary-active: #5b1660;
    --q-primary-subtle: #fdf4ff;
    --q-primary-border: #f5d0fe;
    --q-primary-rgb: 134, 25, 143;
    --q-gray-25: #fcfcfd;
    --q-gray-50: #f8fafc;
    --q-gray-100: #f1f5f9;
    --q-gray-200: #e2e8f0;
    --q-gray-300: #cbd5e1;
    --q-gray-400: #94a3b8;
    --q-gray-500: #64748b;
    --q-gray-600: #475569;
    --q-gray-700: #334155;
    --q-gray-800: #1e293b;
    --q-gray-900: #0f172a;
    --q-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --q-font-display: var(--q-font-sans);
    --q-radius-sm: 10px;
    --q-radius-md: 12px;
    --q-radius-lg: 16px;

    /* Roles are re-declared so a scoped preview (e.g. a UI kit card) resolves them against this theme */
    --q-fg: var(--q-gray-900);
    --q-fg-secondary: var(--q-gray-700);
    --q-fg-muted: var(--q-gray-500);
    --q-fg-disabled: var(--q-gray-400);
    --q-border: var(--q-gray-200);
    --q-border-strong: var(--q-gray-300);
    --q-surface-sunken: var(--q-gray-50);
    --q-canvas: var(--q-gray-50);
    --q-hover: var(--q-gray-100);
    --q-focus-ring: 0 0 0 3px rgba(var(--q-primary-rgb), 0.25);
}

[data-q-theme="folio"] {
    --q-primary: #7a4f2a;
    --q-primary-hover: #643f20;
    --q-primary-active: #503218;
    --q-primary-subtle: #f8f1e9;
    --q-primary-border: #e6d3bf;
    --q-primary-rgb: 122, 79, 42;
    --q-gray-25: #fefdfb;
    --q-gray-50: #fbf9f4;
    --q-gray-100: #f4f1ea;
    --q-gray-200: #e7e2d7;
    --q-gray-300: #d3ccbe;
    --q-gray-400: #a59d8d;
    --q-gray-500: #7a7262;
    --q-gray-600: #5b5446;
    --q-gray-700: #463f33;
    --q-gray-800: #2d281f;
    --q-gray-900: #1b1812;
    --q-font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --q-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
    --q-radius-sm: 2px;
    --q-radius-md: 3px;
    --q-radius-lg: 4px;

    /* Roles are re-declared so a scoped preview (e.g. a UI kit card) resolves them against this theme */
    --q-fg: var(--q-gray-900);
    --q-fg-secondary: var(--q-gray-700);
    --q-fg-muted: var(--q-gray-500);
    --q-fg-disabled: var(--q-gray-400);
    --q-border: var(--q-gray-200);
    --q-border-strong: var(--q-gray-300);
    --q-surface-sunken: var(--q-gray-50);
    --q-canvas: var(--q-gray-50);
    --q-hover: var(--q-gray-100);
    --q-focus-ring: 0 0 0 3px rgba(var(--q-primary-rgb), 0.25);
}

[data-q-theme="cobalt"] {
    --q-primary: #2563eb;
    --q-primary-hover: #1d4ed8;
    --q-primary-active: #1e40af;
    --q-primary-subtle: #eff6ff;
    --q-primary-border: #bfdbfe;
    --q-primary-rgb: 37, 99, 235;
    --q-gray-25: #fcfcfd;
    --q-gray-50: #f9fafb;
    --q-gray-100: #f3f4f6;
    --q-gray-200: #e5e7eb;
    --q-gray-300: #d1d5db;
    --q-gray-400: #9ca3af;
    --q-gray-500: #6b7280;
    --q-gray-600: #4b5563;
    --q-gray-700: #374151;
    --q-gray-800: #1f2937;
    --q-gray-900: #111827;
    --q-font-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --q-font-display: var(--q-font-sans);
    --q-radius-sm: 0px;
    --q-radius-md: 2px;
    --q-radius-lg: 4px;

    /* Roles are re-declared so a scoped preview (e.g. a UI kit card) resolves them against this theme */
    --q-fg: var(--q-gray-900);
    --q-fg-secondary: var(--q-gray-700);
    --q-fg-muted: var(--q-gray-500);
    --q-fg-disabled: var(--q-gray-400);
    --q-border: var(--q-gray-200);
    --q-border-strong: var(--q-gray-300);
    --q-surface-sunken: var(--q-gray-50);
    --q-canvas: var(--q-gray-50);
    --q-hover: var(--q-gray-100);
    --q-focus-ring: 0 0 0 3px rgba(var(--q-primary-rgb), 0.25);
}

[data-q-theme="nordic"] {
    --q-primary: #3d5a80;
    --q-primary-hover: #324b6b;
    --q-primary-active: #283d57;
    --q-primary-subtle: #eef3f8;
    --q-primary-border: #c9d6e6;
    --q-primary-rgb: 61, 90, 128;
    --q-gray-25: #fbfcfd;
    --q-gray-50: #f6f8fa;
    --q-gray-100: #edf1f5;
    --q-gray-200: #dce3ea;
    --q-gray-300: #c3cdd8;
    --q-gray-400: #8e9cab;
    --q-gray-500: #637282;
    --q-gray-600: #4a5868;
    --q-gray-700: #394552;
    --q-gray-800: #242d37;
    --q-gray-900: #141a21;
    --q-font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --q-font-display: var(--q-font-sans);
    --q-radius-sm: 6px;
    --q-radius-md: 8px;
    --q-radius-lg: 12px;

    /* Roles are re-declared so a scoped preview (e.g. a UI kit card) resolves them against this theme */
    --q-fg: var(--q-gray-900);
    --q-fg-secondary: var(--q-gray-700);
    --q-fg-muted: var(--q-gray-500);
    --q-fg-disabled: var(--q-gray-400);
    --q-border: var(--q-gray-200);
    --q-border-strong: var(--q-gray-300);
    --q-surface-sunken: var(--q-gray-50);
    --q-canvas: var(--q-gray-50);
    --q-hover: var(--q-gray-100);
    --q-focus-ring: 0 0 0 3px rgba(var(--q-primary-rgb), 0.25);
}

/* Touch density for the POS and other till-facing screens */
.q-touch {
    --q-control-height: 44px;
    --q-row-height: 44px;
}

/* Compact density for line-item grids and ledgers */
.q-compact {
    --q-control-height: 32px;
    --q-row-height: 32px;
}

/*
 * Status colours follow the active design system: each status keeps its meaning (green, amber, red, blue) but is
 * blended with the theme's primary, and the subtle/border tints are mixed with the theme's surface. Declared on
 * :root and on [data-q-theme] (after the theme blocks) so a scoped preview resolves them against its own theme.
 * The plain values in :root above are the fallback.
 */
:root,
[data-q-theme] {
    --q-success: color-mix(in srgb, #15803d 86%, var(--q-primary));
    --q-warning: color-mix(in srgb, #b45309 86%, var(--q-primary));
    --q-danger: color-mix(in srgb, #b91c1c 86%, var(--q-primary));
    --q-info: color-mix(in srgb, #0369a1 86%, var(--q-primary));

    --q-success-subtle: color-mix(in srgb, var(--q-success) 8%, var(--q-surface));
    --q-success-border: color-mix(in srgb, var(--q-success) 28%, var(--q-surface));
    --q-warning-subtle: color-mix(in srgb, var(--q-warning) 8%, var(--q-surface));
    --q-warning-border: color-mix(in srgb, var(--q-warning) 28%, var(--q-surface));
    --q-danger-subtle: color-mix(in srgb, var(--q-danger) 8%, var(--q-surface));
    --q-danger-border: color-mix(in srgb, var(--q-danger) 28%, var(--q-surface));
    --q-info-subtle: color-mix(in srgb, var(--q-info) 8%, var(--q-surface));
    --q-info-border: color-mix(in srgb, var(--q-info) 28%, var(--q-surface));
}

/*
 * Navigation (sidebar + logo area): the background carries the design system's colour; items stay neutral
 * (white text/icons, translucent white hover and active states) so they read the same on every accent.
 */
:root {
    --q-nav-bg: color-mix(in srgb, var(--q-primary) 80%, #0b0f19);
    --q-nav-border: rgb(255 255 255 / 0.1);
    --q-nav-fg: rgb(255 255 255 / 0.82);
    --q-nav-fg-strong: #ffffff;
    --q-nav-icon: rgb(255 255 255 / 0.7);
    --q-nav-heading: rgb(255 255 255 / 0.5);
    --q-nav-hover-bg: rgb(255 255 255 / 0.08);
    --q-nav-active-bg: rgb(255 255 255 / 0.16);
    --q-nav-active-fg: #ffffff;
    --q-nav-scroll: rgb(255 255 255 / 0.25);
    --q-nav-brand-fg: #ffffff;
    --q-nav-active-bar: none;
    --q-nav-logo-bg: rgb(255 255 255 / 0.16);
}

/* Neutral sidebar: white surface, accent only on the active item (data-q-nav set before paint) */
[data-q-nav="neutral"] {
    --q-nav-bg: var(--q-surface);
    --q-nav-border: var(--q-border);
    --q-nav-fg: var(--q-fg-secondary);
    --q-nav-fg-strong: var(--q-fg);
    --q-nav-icon: var(--q-fg-muted);
    --q-nav-heading: var(--q-fg-muted);
    --q-nav-hover-bg: var(--q-gray-100);
    --q-nav-active-bg: var(--q-primary-subtle);
    --q-nav-active-fg: var(--q-primary);
    --q-nav-scroll: var(--q-gray-300);
    --q-nav-brand-fg: var(--q-fg);
    --q-nav-active-bar: inset 3px 0 0 var(--q-primary);
    --q-nav-logo-bg: var(--q-primary);
}

/* Dark sidebar: the system's darkest neutral, accent on the current page */
[data-q-nav="dark"] {
    --q-nav-bg: var(--q-gray-900);
    --q-nav-bg-image: none;
    --q-nav-border: rgb(255 255 255 / 0.08);
    --q-nav-fg: rgb(255 255 255 / 0.75);
    --q-nav-fg-strong: #ffffff;
    --q-nav-icon: rgb(255 255 255 / 0.55);
    --q-nav-heading: rgb(255 255 255 / 0.4);
    --q-nav-hover-bg: rgb(255 255 255 / 0.06);
    --q-nav-active-bg: var(--q-primary);
    --q-nav-active-fg: #ffffff;
    --q-nav-scroll: rgb(255 255 255 / 0.2);
    --q-nav-brand-fg: #ffffff;
    --q-nav-active-bar: none;
    --q-nav-logo-bg: var(--q-primary);
}

/* Gradient sidebar: the accent fading into a deeper shade towards the bottom */
[data-q-nav="gradient"] {
    --q-nav-bg: var(--q-primary);
    --q-nav-bg-image: linear-gradient(180deg, var(--q-primary) 0%, color-mix(in srgb, var(--q-primary) 55%, #0b0f19) 100%);
    --q-nav-border: rgb(255 255 255 / 0.12);
    --q-nav-fg: rgb(255 255 255 / 0.85);
    --q-nav-fg-strong: #ffffff;
    --q-nav-icon: rgb(255 255 255 / 0.75);
    --q-nav-heading: rgb(255 255 255 / 0.55);
    --q-nav-hover-bg: rgb(255 255 255 / 0.1);
    --q-nav-active-bg: rgb(255 255 255 / 0.2);
    --q-nav-active-fg: #ffffff;
    --q-nav-scroll: rgb(255 255 255 / 0.3);
    --q-nav-brand-fg: #ffffff;
    --q-nav-active-bar: none;
    --q-nav-logo-bg: rgb(255 255 255 / 0.18);
}

/* Tinted sidebar: a soft wash of the accent, accent icons and a solid accent pill */
[data-q-nav="tinted"] {
    --q-nav-bg: color-mix(in srgb, var(--q-primary) 6%, #ffffff);
    --q-nav-bg-image: none;
    --q-nav-border: color-mix(in srgb, var(--q-primary) 14%, #ffffff);
    --q-nav-fg: var(--q-gray-700);
    --q-nav-fg-strong: var(--q-gray-900);
    --q-nav-icon: color-mix(in srgb, var(--q-primary) 70%, var(--q-gray-500));
    --q-nav-heading: color-mix(in srgb, var(--q-primary) 55%, var(--q-gray-500));
    --q-nav-hover-bg: color-mix(in srgb, var(--q-primary) 11%, #ffffff);
    --q-nav-active-bg: var(--q-primary);
    --q-nav-active-fg: #ffffff;
    --q-nav-scroll: color-mix(in srgb, var(--q-primary) 30%, #ffffff);
    --q-nav-brand-fg: var(--q-primary);
    --q-nav-active-bar: none;
    --q-nav-logo-bg: var(--q-primary);
}

/* ---------- Table styles (data-q-table on <html>, chosen in /ui-kit) ----------
 * Every table (Bootstrap .table, DataTables, .q-table) reads these, so a style only swaps values.
 * "lined" is the default: sunken header, hairline rows.
 */
:root {
    --q-table-head-bg: var(--q-surface-sunken);
    --q-table-head-fg: var(--q-fg-muted);
    --q-table-head-border: var(--q-border);
    --q-table-cell-border: var(--q-border);
    --q-table-row-border: var(--q-gray-100);
    --q-table-stripe: var(--q-gray-50);
    --q-table-hover: var(--q-gray-50);
    --q-table-outer-border: var(--q-border);
    --q-table-col-border: transparent;
}

/* Striped: alternate rows shaded, no row lines */
[data-q-table="striped"] {
    --q-table-cell-border: transparent;
    --q-table-row-border: transparent;
    --q-table-stripe: color-mix(in srgb, var(--q-gray-100) 70%, var(--q-surface));
    --q-table-hover: var(--q-gray-100);
}

/* Bordered: a full grid, like a spreadsheet */
[data-q-table="bordered"] {
    --q-table-cell-border: var(--q-border);
    --q-table-row-border: var(--q-border);
    --q-table-col-border: var(--q-border);
}

/* Minimal: no header fill and no frame; rows separated by faint lines */
[data-q-table="minimal"] {
    --q-table-head-bg: transparent;
    --q-table-head-border: var(--q-border-strong, var(--q-border));
    --q-table-cell-border: var(--q-gray-100);
    --q-table-outer-border: transparent;
    --q-table-stripe: transparent;
}

/* Accent: the header takes a soft wash of the design system's colour */
[data-q-table="accent"] {
    --q-table-head-bg: var(--q-primary-subtle);
    --q-table-head-fg: var(--q-primary);
    --q-table-head-border: color-mix(in srgb, var(--q-primary) 25%, transparent);
    --q-table-hover: color-mix(in srgb, var(--q-primary) 5%, var(--q-surface));
}

/* Table density (data-q-density): compact rows show more on screen */
[data-q-density="compact"] {
    --q-row-height: 32px;
}

/* ---------- Card styles (data-q-card on <html>, chosen in /ui-kit) ----------
 * Panels, KPI tiles, Bootstrap cards and dashboard chart boxes read these. "flat" is the default.
 */
:root {
    --q-card-bg: var(--q-surface);
    --q-card-border: var(--q-border);
    --q-card-top: 1px solid var(--q-card-border);
    --q-card-shadow: none;
    --q-card-radius: var(--q-radius-md);
    --q-card-divider: var(--q-border);
}

/* Elevated: no border, a soft shadow lifts the card off the page */
[data-q-card="elevated"] {
    --q-card-border: transparent;
    --q-card-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 6px 18px rgb(15 23 42 / 0.07);
    --q-card-radius: var(--q-radius-lg);
    --q-card-divider: var(--q-gray-100);
}

/* Outlined: a crisper, stronger border and tighter corners */
[data-q-card="outlined"] {
    --q-card-border: var(--q-border-strong, var(--q-gray-300));
    --q-card-radius: var(--q-radius-sm);
}

/* Accent edge: flat, with the design system's colour along the top */
[data-q-card="accent"] {
    --q-card-top: 3px solid var(--q-primary);
}

/* Tinted: a faint wash of the design system's colour */
[data-q-card="tinted"] {
    --q-card-bg: color-mix(in srgb, var(--q-primary) 3%, var(--q-surface));
    --q-card-border: color-mix(in srgb, var(--q-primary) 14%, var(--q-border));
    --q-card-divider: color-mix(in srgb, var(--q-primary) 12%, var(--q-border));
}

/*
 * Chart palettes: six categorical colours per design system, led by its primary. Dashboard bar, line and pie
 * charts read them in order (mainDashboard.js chartPalette), so series keep the same colour across charts.
 */
:root,
[data-q-theme="ledger"] {
    --q-chart-1: #4338ca;
    --q-chart-2: #0ea5e9;
    --q-chart-3: #10b981;
    --q-chart-4: #f59e0b;
    --q-chart-5: #f43f5e;
    --q-chart-6: #a855f7;
}

[data-q-theme="graphite"] {
    --q-chart-1: #27272a;
    --q-chart-2: #71717a;
    --q-chart-3: #0ea5e9;
    --q-chart-4: #f59e0b;
    --q-chart-5: #10b981;
    --q-chart-6: #a1a1aa;
}

[data-q-theme="harbor"] {
    --q-chart-1: #0f766e;
    --q-chart-2: #0ea5e9;
    --q-chart-3: #84cc16;
    --q-chart-4: #f59e0b;
    --q-chart-5: #e11d48;
    --q-chart-6: #6366f1;
}

[data-q-theme="atlas"] {
    --q-chart-1: #1e40af;
    --q-chart-2: #06b6d4;
    --q-chart-3: #16a34a;
    --q-chart-4: #f97316;
    --q-chart-5: #dc2626;
    --q-chart-6: #8b5cf6;
}

[data-q-theme="copper"] {
    --q-chart-1: #9a3412;
    --q-chart-2: #f59e0b;
    --q-chart-3: #0f766e;
    --q-chart-4: #475569;
    --q-chart-5: #db2777;
    --q-chart-6: #65a30d;
}

[data-q-theme="sage"] {
    --q-chart-1: #3f6b57;
    --q-chart-2: #84a98c;
    --q-chart-3: #d4a373;
    --q-chart-4: #577590;
    --q-chart-5: #bc6c25;
    --q-chart-6: #9d8189;
}

[data-q-theme="plum"] {
    --q-chart-1: #86198f;
    --q-chart-2: #ec4899;
    --q-chart-3: #6366f1;
    --q-chart-4: #f59e0b;
    --q-chart-5: #14b8a6;
    --q-chart-6: #64748b;
}

[data-q-theme="folio"] {
    --q-chart-1: #7a4f2a;
    --q-chart-2: #b08968;
    --q-chart-3: #2f4858;
    --q-chart-4: #c9a227;
    --q-chart-5: #8c2f39;
    --q-chart-6: #5c7457;
}

[data-q-theme="cobalt"] {
    --q-chart-1: #2563eb;
    --q-chart-2: #f97316;
    --q-chart-3: #10b981;
    --q-chart-4: #eab308;
    --q-chart-5: #ef4444;
    --q-chart-6: #8b5cf6;
}

[data-q-theme="nordic"] {
    --q-chart-1: #3d5a80;
    --q-chart-2: #98c1d9;
    --q-chart-3: #ee6c4d;
    --q-chart-4: #293241;
    --q-chart-5: #e0a458;
    --q-chart-6: #6a994e;
}