/**
 * Mauzo design tokens — the one source of colour, radius, shadow and size (docs/FACELIFT_PLAN.md).
 *
 * The first part is the design system's tokens; the second maps them onto Tabler's own
 * variables, so every Tabler component in the app takes them without page changes.
 *
 * Theme: <html data-theme="light|dark"> set before first paint by mauzo-theme.js; no
 * attribute means "System" (follows the device). data-bs-theme is kept in step for Tabler.
 *
 * Colour rules: --primary is inverted (black in light, white in dark) and is the only accent.
 * Status colours only for state; --vendor-* only for identity (which business, which channel).
 * Mauzo red is the brand mark (logo, landing page), not a UI accent.
 */

:root, [data-theme="light"] {
    --bg: #f9fafb; --surface: #ffffff; --surface-2: #f9fafb; --surface-3: #f3f4f6;
    --border: #e5e7eb; --border-strong: #d1d5db;
    --ink: #374151; --ink-strong: #111827; --muted: #6b7280; --faint: #9ca3af;
    --primary: #111827; --primary-ink: #ffffff; --primary-hover: #1f2937; --focus-ring: #11182729;
    --success: #237a33; --success-soft: #ebfbee;
    --warning: #a65200; --warning-soft: #fff4e6;
    --danger: #c92a2a;  --danger-soft: #fff5f5;
    --info: #1864ab;    --info-soft: #e7f5ff;
    --vendor-blue: #066fd1; --vendor-purple: #ae3ec9; --vendor-orange: #f76707;
    --vendor-teal: #0ca678; --vendor-pink: #d6336c; --vendor-lime: #74b816;
    --chart-line: var(--brand); --chart-compare: #9ca3af; --chart-grid: var(--border);
    /* Charts: Mauzo red leads; money in / up is green, money out / down is red. */
    --chart-in: var(--success); --chart-out: var(--brand);
    --overlay: #11182766;
    --shadow-card: 0 1px 2px 0 rgba(17, 24, 39, .04);
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, .08);
    --shadow-pop: 0 12px 32px -8px rgba(17, 24, 39, .16), 0 2px 6px -2px rgba(17, 24, 39, .08);
    --brand: #e9473c; --brand-strong: #d23a2f; --brand-soft: #e9473c14;
}

[data-theme="dark"] {
    --bg: #111827; --surface: #1f2937; --surface-2: #18212f; --surface-3: #273141;
    --border: #374151; --border-strong: #4b5563;
    --ink: #e5e7eb; --ink-strong: #f9fafb; --muted: #9ca3af; --faint: #6b7280;
    --primary: #f9fafb; --primary-ink: #111827; --primary-hover: #e5e7eb; --focus-ring: #f9fafb33;
    --success: #69db7c; --success-soft: #2f9e4426;
    --warning: #ffc078; --warning-soft: #f7670726;
    --danger: #ff8787;  --danger-soft: #e0313126;
    --info: #74c0fc;    --info-soft: #228be626;
    --vendor-blue: #4dabf7; --vendor-purple: #da77f2; --vendor-orange: #ffa94d;
    --vendor-teal: #38d9a9; --vendor-pink: #f783ac; --vendor-lime: #a9e34b;
    --chart-compare: #6b7280; --overlay: #000000a3;
    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .4);
    --brand: #ef5a4f; --brand-strong: #e9473c; --brand-soft: #e9473c26;
}

/* System: no data-theme attribute, device in dark mode. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --bg: #111827; --surface: #1f2937; --surface-2: #18212f; --surface-3: #273141;
        --border: #374151; --border-strong: #4b5563;
        --ink: #e5e7eb; --ink-strong: #f9fafb; --muted: #9ca3af; --faint: #6b7280;
        --primary: #f9fafb; --primary-ink: #111827; --primary-hover: #e5e7eb; --focus-ring: #f9fafb33;
        --success: #69db7c; --success-soft: #2f9e4426;
        --warning: #ffc078; --warning-soft: #f7670726;
        --danger: #ff8787;  --danger-soft: #e0313126;
        --info: #74c0fc;    --info-soft: #228be626;
        --vendor-blue: #4dabf7; --vendor-purple: #da77f2; --vendor-orange: #ffa94d;
        --vendor-teal: #38d9a9; --vendor-pink: #f783ac; --vendor-lime: #a9e34b;
        --chart-compare: #6b7280; --overlay: #000000a3;
        --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, .3);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .4);
        --brand: #ef5a4f; --brand-strong: #e9473c; --brand-soft: #e9473c26;
    }
}

:root {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
    --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 9999px;
    --sidebar-width: 15rem; --sidebar-folded: 4.25rem; --navbar-height: 3.5rem;
    --container-default: 1320px; --float-gap: .75rem;
}

/* ------------------------------------------------------------------ Tabler mapping */

:root, [data-bs-theme], [data-theme] {
    --tblr-font-sans-serif: var(--font-sans);
    --tblr-font-monospace: var(--font-mono);
    --tblr-body-font-size: .875rem;
    --tblr-body-line-height: 1.4285714;

    --tblr-body-bg: var(--bg);
    --tblr-body-color: var(--ink);
    --tblr-emphasis-color: var(--ink-strong);
    --tblr-bg-surface: var(--surface);
    --tblr-bg-surface-secondary: var(--surface-2);
    --tblr-bg-surface-tertiary: var(--surface-3);
    --tblr-bg-forms: var(--surface);
    --tblr-card-bg: var(--surface);
    --tblr-secondary-bg: var(--surface-3);
    --tblr-tertiary-bg: var(--surface-2);
    --tblr-border-color: var(--border);
    --tblr-border-color-translucent: var(--border);
    --tblr-card-border-color: var(--border);
    --tblr-secondary: var(--muted);
    --tblr-secondary-color: var(--muted);
    --tblr-muted: var(--muted);
    --tblr-tertiary-color: var(--faint);

    --tblr-primary: var(--primary);
    --tblr-primary-fg: var(--primary-ink);
    --tblr-primary-darken: var(--primary-hover);
    --tblr-primary-text-emphasis: var(--ink-strong);
    --tblr-primary-bg-subtle: var(--surface-3);
    --tblr-primary-border-subtle: var(--border-strong);
    --tblr-link-color: var(--ink-strong);
    --tblr-link-hover-color: var(--ink-strong);
    --tblr-navbar-active-border-color: var(--primary);

    --tblr-success: var(--success);
    --tblr-warning: var(--warning);
    --tblr-danger: var(--danger);
    --tblr-info: var(--info);
    --tblr-green: var(--success);
    --tblr-red: var(--danger);
    --tblr-orange: var(--warning);
    --tblr-yellow: var(--warning);
    --tblr-azure: var(--info);
    --tblr-blue: var(--vendor-blue);
    --tblr-purple: var(--vendor-purple);
    --tblr-teal: var(--vendor-teal);
    --tblr-pink: var(--vendor-pink);
    --tblr-lime: var(--vendor-lime);
    --tblr-cyan: var(--vendor-teal);
    --tblr-indigo: var(--vendor-blue);

    --tblr-border-radius: var(--radius-md);
    --tblr-border-radius-sm: var(--radius-sm);
    --tblr-border-radius-lg: var(--radius-lg);
    --tblr-border-radius-xl: var(--radius-xl);
    --tblr-card-border-radius: var(--radius-lg);
    --tblr-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --tblr-box-shadow-card: var(--shadow-card);
    --tblr-box-shadow-sm: var(--shadow-sm);
    --tblr-box-shadow-dropdown: var(--shadow-pop);
    --tblr-box-shadow-input: none;
}

/* rgb() triplets Tabler composes with opacity (badges *-lt, text-*, bg-*). */
:root, [data-theme="light"] {
    --tblr-primary-rgb: 17, 24, 39; --tblr-body-color-rgb: 55, 65, 81; --tblr-emphasis-color-rgb: 17, 24, 39;
    --tblr-secondary-rgb: 107, 114, 128; --tblr-muted-rgb: 107, 114, 128; --tblr-body-bg-rgb: 249, 250, 251;
    --tblr-success-rgb: 35, 122, 51; --tblr-green-rgb: 35, 122, 51;
    --tblr-warning-rgb: 166, 82, 0; --tblr-orange-rgb: 166, 82, 0; --tblr-yellow-rgb: 166, 82, 0;
    --tblr-danger-rgb: 201, 42, 42; --tblr-red-rgb: 201, 42, 42;
    --tblr-info-rgb: 24, 100, 171; --tblr-azure-rgb: 24, 100, 171;
    --tblr-blue-rgb: 6, 111, 209; --tblr-purple-rgb: 174, 62, 201; --tblr-teal-rgb: 12, 166, 120;
    --tblr-pink-rgb: 214, 51, 108; --tblr-lime-rgb: 116, 184, 22; --tblr-cyan-rgb: 12, 166, 120; --tblr-indigo-rgb: 6, 111, 209;
    --tblr-link-color-rgb: 17, 24, 39; --tblr-link-hover-color-rgb: 17, 24, 39;
}
[data-theme="dark"] {
    --tblr-primary-rgb: 249, 250, 251; --tblr-body-color-rgb: 229, 231, 235; --tblr-emphasis-color-rgb: 249, 250, 251;
    --tblr-secondary-rgb: 156, 163, 175; --tblr-muted-rgb: 156, 163, 175; --tblr-body-bg-rgb: 17, 24, 39;
    --tblr-success-rgb: 105, 219, 124; --tblr-green-rgb: 105, 219, 124;
    --tblr-warning-rgb: 255, 192, 120; --tblr-orange-rgb: 255, 192, 120; --tblr-yellow-rgb: 255, 192, 120;
    --tblr-danger-rgb: 255, 135, 135; --tblr-red-rgb: 255, 135, 135;
    --tblr-info-rgb: 116, 192, 252; --tblr-azure-rgb: 116, 192, 252;
    --tblr-blue-rgb: 77, 171, 247; --tblr-purple-rgb: 218, 119, 242; --tblr-teal-rgb: 56, 217, 169;
    --tblr-pink-rgb: 247, 131, 172; --tblr-lime-rgb: 169, 227, 75; --tblr-cyan-rgb: 56, 217, 169; --tblr-indigo-rgb: 77, 171, 247;
    --tblr-link-color-rgb: 249, 250, 251; --tblr-link-hover-color-rgb: 249, 250, 251;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --tblr-primary-rgb: 249, 250, 251; --tblr-body-color-rgb: 229, 231, 235; --tblr-emphasis-color-rgb: 249, 250, 251;
        --tblr-secondary-rgb: 156, 163, 175; --tblr-muted-rgb: 156, 163, 175; --tblr-body-bg-rgb: 17, 24, 39;
        --tblr-success-rgb: 105, 219, 124; --tblr-green-rgb: 105, 219, 124;
        --tblr-warning-rgb: 255, 192, 120; --tblr-orange-rgb: 255, 192, 120; --tblr-yellow-rgb: 255, 192, 120;
        --tblr-danger-rgb: 255, 135, 135; --tblr-red-rgb: 255, 135, 135;
        --tblr-info-rgb: 116, 192, 252; --tblr-azure-rgb: 116, 192, 252;
        --tblr-blue-rgb: 77, 171, 247; --tblr-purple-rgb: 218, 119, 242; --tblr-teal-rgb: 56, 217, 169;
        --tblr-pink-rgb: 247, 131, 172; --tblr-lime-rgb: 169, 227, 75; --tblr-cyan-rgb: 56, 217, 169; --tblr-indigo-rgb: 77, 171, 247;
        --tblr-link-color-rgb: 249, 250, 251; --tblr-link-hover-color-rgb: 249, 250, 251;
    }
}