/**
 * mauzo design tokens, brand system v2.0 (docs/brand/BRAND.md; values from docs/brand/mauzo-tokens.v2.css).
 *
 * 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 follows meaning:
 *   red (--brand*)    mauzo: the logo, the one primary action per screen, the current period in charts
 *   magenta (--ai*)   Octopus (the AI) only: insights, suggestions, the sparkle, "Ask Octopus"
 *   cyan (--signal*)  live or predicted: forecasts (dashed), live/sync badges
 *   danger (rose)     losses, errors, overdue; never brand red, always with an icon or arrow
 * Neutrals lean slightly blue toward Obsidian. --primary (Obsidian / white) is the ink for
 * links, focus and selected states; primary buttons are action red (mauzo-ui.css).
 */

:root, [data-theme="light"] {
    color-scheme: light;
    --brand: #FF0000; --brand-strong: #E00000; --brand-hover: #C80000; --brand-soft: #FF000012; --brand-text: #D90000;
    --ai: #FF2D87; --ai-text: #B0155C; --ai-soft: #FFF0F6; --ai-border: #FFD0E4;
    --signal: #00D4FF; --signal-text: #007A99; --signal-soft: #E0F9FF;
    --ember: #FF6B35; --obsidian: #0B0B12; --graphite: #1E1F2A; --slate: #2A2B38;
    --gradient-brand: linear-gradient(90deg, #FF0000 0%, #FF2D87 55%, #FF6B35 100%); /* marketing only */
    --bg: #F4F5F8; --surface: #FFFFFF; --surface-2: #F4F5F8; --surface-3: #ECEDF2;
    --border: #E3E4EA; --border-strong: #CFD1DA;
    --ink: #2A2B36; --ink-strong: #0B0B12; --muted: #5E6172; --faint: #8D90A0;
    --primary: #0B0B12; --primary-ink: #FFFFFF; --primary-hover: #1E1F2A; --focus-ring: #0B0B1229;
    --success: #0B7A58; --success-fill: #14C38E; --success-soft: #E3F8F0;
    --warning: #8A5A00; --warning-fill: #F5A524; --warning-soft: #FFF6E0;
    --danger: #B8324A;  --danger-fill: #D6455D;  --danger-soft: #FBE9EC;
    --info: #007A99;    --info-soft: #E0F9FF;
    --vendor-blue: #007A99; --vendor-purple: #B0155C; --vendor-orange: #FF6B35;
    --vendor-teal: #0B7A58; --vendor-pink: #FF2D87; --vendor-lime: #74B816;
    /* Charts: current period red, last period neutral, forecast cyan (dashed), money in mint, out rose. */
    --chart-line: var(--brand); --chart-compare: #CFD1DA; --chart-forecast: #00A9CC; --chart-grid: #ECEDF2;
    --chart-in: #14C38E; --chart-out: #D6455D;
    --chart-1: #FF0000; --chart-2: #FF2D87; --chart-3: #FF6B35; --chart-4: #00A9CC; --chart-5: #2A2B38;
    --overlay: #0B0B1266;
    --shadow-card: 0 1px 2px 0 rgba(11, 11, 18, .04);
    --shadow-sm: 0 1px 2px rgba(11, 11, 18, .08);
    --shadow-pop: 0 12px 32px -8px rgba(11, 11, 18, .16), 0 2px 6px -2px rgba(11, 11, 18, .08);
}

[data-theme="dark"], .mz-dark {
    color-scheme: dark;
    --brand: #FF1A1A; --brand-strong: #FF1A1A; --brand-hover: #E00000; --brand-soft: #FF1A1A24; --brand-text: #FF4D4D;
    --ai: #FF5AA3; --ai-text: #FF8CC0; --ai-soft: #FF2D8722; --ai-border: #FF2D8744;
    --signal: #00D4FF; --signal-text: #7FE7FF; --signal-soft: #00D4FF1F;
    --ember: #FF8A5C;
    --bg: #0B0B12; --surface: #16171F; --surface-2: #111219; --surface-3: #1E1F2A;
    --border: #2A2B38; --border-strong: #3A3B48;
    --ink: #E4E5EC; --ink-strong: #F4F5F8; --muted: #A9ABB8; --faint: #6E7182;
    --primary: #F4F5F8; --primary-ink: #0B0B12; --primary-hover: #E4E5EC; --focus-ring: #F4F5F833;
    --success: #14C38E; --success-fill: #14C38E; --success-soft: #14C38E22;
    --warning: #FFC24D; --warning-fill: #F5A524; --warning-soft: #F5A52426;
    --danger: #FF6B81;  --danger-fill: #D6455D;  --danger-soft: #D6455D26;
    --info: #7FE7FF;    --info-soft: #00D4FF1F;
    --vendor-blue: #7FE7FF; --vendor-purple: #FF8CC0; --vendor-orange: #FF8A5C;
    --vendor-teal: #14C38E; --vendor-pink: #FF5AA3; --vendor-lime: #A9E34B;
    --chart-compare: #3A3B48; --chart-forecast: #00D4FF; --chart-grid: #22232F; --chart-5: #A9ABB8;
    --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);
}

/* System: no data-theme attribute, device in dark mode. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;
        --brand: #FF1A1A; --brand-strong: #FF1A1A; --brand-hover: #E00000; --brand-soft: #FF1A1A24; --brand-text: #FF4D4D;
        --ai: #FF5AA3; --ai-text: #FF8CC0; --ai-soft: #FF2D8722; --ai-border: #FF2D8744;
        --signal: #00D4FF; --signal-text: #7FE7FF; --signal-soft: #00D4FF1F;
        --ember: #FF8A5C;
        --bg: #0B0B12; --surface: #16171F; --surface-2: #111219; --surface-3: #1E1F2A;
        --border: #2A2B38; --border-strong: #3A3B48;
        --ink: #E4E5EC; --ink-strong: #F4F5F8; --muted: #A9ABB8; --faint: #6E7182;
        --primary: #F4F5F8; --primary-ink: #0B0B12; --primary-hover: #E4E5EC; --focus-ring: #F4F5F833;
        --success: #14C38E; --success-fill: #14C38E; --success-soft: #14C38E22;
        --warning: #FFC24D; --warning-fill: #F5A524; --warning-soft: #F5A52426;
        --danger: #FF6B81;  --danger-fill: #D6455D;  --danger-soft: #D6455D26;
        --info: #7FE7FF;    --info-soft: #00D4FF1F;
        --vendor-blue: #7FE7FF; --vendor-purple: #FF8CC0; --vendor-orange: #FF8A5C;
        --vendor-teal: #14C38E; --vendor-pink: #FF5AA3; --vendor-lime: #A9E34B;
        --chart-compare: #3A3B48; --chart-forecast: #00D4FF; --chart-grid: #22232F; --chart-5: #A9ABB8;
        --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);
    }
}

:root {
    --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
    --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains 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: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 9999px;
    --motion-fast: 120ms; --motion-base: 200ms; --motion-rise: 320ms; --motion-draw: 800ms; --ease-brand: cubic-bezier(.2, .8, .2, 1);
    --on-brand: #FFFFFF; /* text on red and Obsidian fills */
    --on-dark: #E4E5EC;  /* body text on Obsidian panels (code blocks) */
    --on-dark-muted: #A9ABB8; /* secondary text on Obsidian */
    --code-key: #FF5AA3; --code-value: #7FE7FF; --code-comment: #6E7182; /* code on Obsidian (brand guide) */
    --logo-mark: #FF0000; /* the arrow: always mauzo red, in light and dark */
    --sidebar-width: 15rem; --sidebar-folded: 4.25rem; --navbar-height: 3.5rem;
    --sidebar-group-gap: 14px; /* space between the menu's groups (Home · Sell… · Spend… · Analytics) */
    --container-default: 1320px; --float-gap: .75rem;
}

/* The sidebar is Obsidian in light and dark (BRAND.md, Dashboard rules). It re-declares the
   tokens, so every rule that styles the sidebar with tokens draws it dark. */
.mz-sidebar {
    --surface: #0B0B12; --surface-2: #111219; --surface-3: #1E1F2A;
    --border: #2A2B38; --border-strong: #3A3B48;
    --ink: #A9ABB8; --ink-strong: #FFFFFF; --muted: #8D90A0; --faint: #6E7182;
    --primary: #F4F5F8; --primary-ink: #0B0B12; --primary-hover: #E4E5EC; --focus-ring: #F4F5F833;
    --brand: #FF0000; --brand-soft: #FF1A1A24; --brand-text: #FF4D4D;
    --tblr-body-color-rgb: 169, 171, 184; --tblr-emphasis-color-rgb: 255, 255, 255;
    --tblr-secondary-rgb: 141, 144, 160; --tblr-muted-rgb: 141, 144, 160;
    color-scheme: dark;
}

/* "Menu colour: Match theme" (Appearance), and the phone menu sheet always: the sidebar takes the
   page's tokens instead of Obsidian's (they inherit from <html>, where the theme sets them). */
[data-menu="theme"] .mz-sidebar {
    --surface: inherit; --surface-2: inherit; --surface-3: inherit;
    --border: inherit; --border-strong: inherit;
    --ink: inherit; --ink-strong: inherit; --muted: inherit; --faint: inherit;
    --primary: inherit; --primary-ink: inherit; --primary-hover: inherit; --focus-ring: inherit;
    --brand: inherit; --brand-soft: inherit; --brand-text: inherit;
    --tblr-body-color-rgb: inherit; --tblr-emphasis-color-rgb: inherit; --tblr-secondary-rgb: inherit; --tblr-muted-rgb: inherit;
    color-scheme: inherit;
}
@media (max-width: 991.98px) {
    html .mz-sidebar {
        --surface: inherit; --surface-2: inherit; --surface-3: inherit;
        --border: inherit; --border-strong: inherit;
        --ink: inherit; --ink-strong: inherit; --muted: inherit; --faint: inherit;
        --primary: inherit; --primary-ink: inherit; --primary-hover: inherit; --focus-ring: inherit;
        --brand: inherit; --brand-soft: inherit; --brand-text: inherit;
        --tblr-body-color-rgb: inherit; --tblr-emphasis-color-rgb: inherit; --tblr-secondary-rgb: inherit; --tblr-muted-rgb: inherit;
        color-scheme: inherit;
    }
}

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

:root, [data-bs-theme], [data-theme], .mz-sidebar, .mz-dark {
    --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: 11, 11, 18; --tblr-body-color-rgb: 42, 43, 54; --tblr-emphasis-color-rgb: 11, 11, 18;
    --tblr-secondary-rgb: 94, 97, 114; --tblr-muted-rgb: 94, 97, 114; --tblr-body-bg-rgb: 244, 245, 248;
    --tblr-success-rgb: 11, 122, 88; --tblr-green-rgb: 11, 122, 88;
    --tblr-warning-rgb: 138, 90, 0; --tblr-orange-rgb: 138, 90, 0; --tblr-yellow-rgb: 138, 90, 0;
    --tblr-danger-rgb: 184, 50, 74; --tblr-red-rgb: 184, 50, 74;
    --tblr-info-rgb: 0, 122, 153; --tblr-azure-rgb: 0, 122, 153;
    --tblr-blue-rgb: 0, 122, 153; --tblr-purple-rgb: 176, 21, 92; --tblr-teal-rgb: 11, 122, 88;
    --tblr-pink-rgb: 255, 45, 135; --tblr-lime-rgb: 116, 184, 22; --tblr-cyan-rgb: 0, 122, 153; --tblr-indigo-rgb: 0, 122, 153;
    --tblr-link-color-rgb: 11, 11, 18; --tblr-link-hover-color-rgb: 11, 11, 18;
}
[data-theme="dark"], .mz-dark {
    --tblr-primary-rgb: 244, 245, 248; --tblr-body-color-rgb: 228, 229, 236; --tblr-emphasis-color-rgb: 244, 245, 248;
    --tblr-secondary-rgb: 169, 171, 184; --tblr-muted-rgb: 169, 171, 184; --tblr-body-bg-rgb: 11, 11, 18;
    --tblr-success-rgb: 20, 195, 142; --tblr-green-rgb: 20, 195, 142;
    --tblr-warning-rgb: 255, 194, 77; --tblr-orange-rgb: 255, 194, 77; --tblr-yellow-rgb: 255, 194, 77;
    --tblr-danger-rgb: 255, 107, 129; --tblr-red-rgb: 255, 107, 129;
    --tblr-info-rgb: 127, 231, 255; --tblr-azure-rgb: 127, 231, 255;
    --tblr-blue-rgb: 127, 231, 255; --tblr-purple-rgb: 255, 140, 192; --tblr-teal-rgb: 20, 195, 142;
    --tblr-pink-rgb: 255, 90, 163; --tblr-lime-rgb: 169, 227, 75; --tblr-cyan-rgb: 127, 231, 255; --tblr-indigo-rgb: 127, 231, 255;
    --tblr-link-color-rgb: 244, 245, 248; --tblr-link-hover-color-rgb: 244, 245, 248;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --tblr-primary-rgb: 244, 245, 248; --tblr-body-color-rgb: 228, 229, 236; --tblr-emphasis-color-rgb: 244, 245, 248;
        --tblr-secondary-rgb: 169, 171, 184; --tblr-muted-rgb: 169, 171, 184; --tblr-body-bg-rgb: 11, 11, 18;
        --tblr-success-rgb: 20, 195, 142; --tblr-green-rgb: 20, 195, 142;
        --tblr-warning-rgb: 255, 194, 77; --tblr-orange-rgb: 255, 194, 77; --tblr-yellow-rgb: 255, 194, 77;
        --tblr-danger-rgb: 255, 107, 129; --tblr-red-rgb: 255, 107, 129;
        --tblr-info-rgb: 127, 231, 255; --tblr-azure-rgb: 127, 231, 255;
        --tblr-blue-rgb: 127, 231, 255; --tblr-purple-rgb: 255, 140, 192; --tblr-teal-rgb: 20, 195, 142;
        --tblr-pink-rgb: 255, 90, 163; --tblr-lime-rgb: 169, 227, 75; --tblr-cyan-rgb: 127, 231, 255; --tblr-indigo-rgb: 127, 231, 255;
        --tblr-link-color-rgb: 244, 245, 248; --tblr-link-hover-color-rgb: 244, 245, 248;
    }
}