/* ================================================================= */
/* LAKAN DESIGN TOKENS                                               */
/* CSS Custom Properties — shared across all pages and components    */
/* Single source of truth: light + dark mode                         */
/* ================================================================= */

:root {
    /* ── Core palette ── */
    --lk-primary: #3E6D66;
    --lk-primary-dark: #355e58;
    --lk-primary-light: rgba(62, 109, 102, 0.1);
    --lk-primary-lighten: #5a9e95;
    --lk-primary-background: rgba(62, 109, 102, 0.06);
    --lk-secondary: #D4AF37;
    --lk-secondary-light: rgba(212, 175, 55, 0.1);
    --lk-background: #F9F7F2;
    --lk-surface: #FFFFFF;
    --lk-text: #333333;
    --lk-text-muted: #718096;
    --lk-text-on-primary: #FFFFFF;
    --lk-border-color: #e5e7eb;
    --lk-overlay: rgba(0, 0, 0, 0.67);
    --lk-drawer-bg: #FFFFFF;

    /* ── Semantic colors ── */
    --lk-success: #22c55e;
    --lk-error: #DC362E;
    --lk-danger-color: #be0006;
    --lk-danger-color-background: rgba(182, 49, 53, 0.06);
    --lk-tertiary: #6366f1;
    --lk-tertiary-light: rgba(99, 102, 241, 0.1);
    --lk-warning: #f59e0b;
    --lk-warning-light: rgba(245, 158, 11, 0.1);
    --lk-financial: #10b981;
    --lk-financial-light: rgba(16, 185, 129, 0.1);

    /* ── Icon/state helpers ── */
    --lk-icon-muted: #d1d5db;
    --lk-icon-destructive: #ef4444;

    /* ── Shadows ── */
    --lk-shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    --lk-shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* ── Radii ── */
    --lk-border-radius: 0.75rem;
    --lk-border-radius-lg: 1rem;
    --lk-border-radius-xl: 1.5rem;
    --lk-border-radius-2xl: 2rem;

    /* ── Typography ── */
    --lk-font-display: "Noto Serif", Georgia, serif;
    --lk-font-sans: "Onest", Helvetica, Arial, sans-serif;
    --lk-font-mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
    --lk-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Nav-specific ── */
    --lk-nav-active-bg: rgba(62, 109, 102, 0.08);
    --lk-nav-hover-bg: rgba(62, 109, 102, 0.04);
    --lk-nav-pill-shadow: 0 0 10px rgba(62, 109, 102, 0.3), 2px 0 14px rgba(62, 109, 102, 0.15);
    --lk-nav-scrollbar: rgba(62, 109, 102, 0.15);
    --lk-nav-scrollbar-hover: rgba(62, 109, 102, 0.25);

    /* ── Hero/promo gradients ── */
    --lk-hero-gradient-start: #F2F5E9;
    --lk-hero-gradient-end: #FFFFFF;
    --lk-hero-blob-warm: rgba(253, 224, 71, 0.12);
    --lk-hero-blob-muted: rgba(168, 162, 158, 0.08);
    --lk-promo-blob-green: rgba(62, 123, 112, 0.06);
    --lk-promo-badge-bg: rgba(62, 123, 112, 0.1);

    /* ── Pro CTA card ── */
    --lk-pro-gradient-start: #DCE7E2;
    --lk-pro-gradient-end: #F5F2EA;
    --lk-pro-border: #C8D9D0;

    /* ── Quick-Action accent colors ── */
    --lk-qa-orange: #f5a623;
    --lk-qa-purple: #8e44ad;
    --lk-qa-indigo: #4876ff;
    --lk-qa-teal: #26a69a;

    /* ── KPI card palettes ── */
    --lk-kpi-teal-bg: #c8e8dc;
    --lk-kpi-teal-fg: #1a5c4e;
    --lk-kpi-amber-bg: #f5dda8;
    --lk-kpi-amber-fg: #7a500a;
    --lk-kpi-red-bg: #f5baba;
    --lk-kpi-red-fg: #9b1c1c;
    --lk-kpi-blue-bg: #b8d4fa;
    --lk-kpi-blue-fg: #1e4e8a;
    --lk-kpi-neutral-bg: #d8dce2;
    --lk-kpi-neutral-fg: #374151;

    /* ── MudBlazor drawer override ── */
    --mud-drawer-mini-width-left: 72px;
    --padding-xs: 4px;
    --padding-2xs: 8px;
    --padding-3xs: 10px;
    --padding-md: 12px;
    --padding-lg: 16px;
    --padding-xl: 20px;
    --padding-3xl: 28px;

    --mud-xs-border-radius: 4px;
    --mud-sm-border-radius: 8px;
    --mud-md-border-radius: 12px;
    --mud-lg-border-radius: 16px;
    --mud-3xl-border-radius: 28px;
    --mud-button-border-radius: 50px;

    /* ── Snackbar ── */
    --lk-snack-bg: #FFFFFF;
    --lk-snack-text: var(--lk-text);
    --lk-snack-text-muted: var(--lk-text-muted);
    --lk-snack-border: var(--lk-border-color);
    --lk-snack-close-color: var(--lk-text-muted);
    --lk-snack-radius: var(--lk-border-radius);
    --lk-snack-accent-width: 4px;
    --lk-snack-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.10),
                       0 4px 12px -2px rgba(0, 0, 0, 0.06);
    --lk-snack-action-bg: var(--lk-tertiary);
    --lk-snack-action-text: #FFFFFF;
}

/* ================================================================= */
/* DARK MODE OVERRIDES                                                */
/* Triggered by .dark-theme class on the layout root div              */
/* ================================================================= */

.dark-theme {
    /* ── Core palette ── */
    --lk-primary: #5a9e95;
    --lk-primary-dark: #4a8a82;
    --lk-primary-light: rgba(90, 158, 149, 0.12);
    --lk-primary-lighten: #7dbfb6;
    --lk-primary-background: rgba(90, 158, 149, 0.08);
    --lk-secondary: #D4AF37;
    --lk-secondary-light: rgba(212, 175, 55, 0.12);
    --lk-background: #121212;
    --lk-surface: #1e1e1e;
    --lk-text: #e2e8f0;
    --lk-text-muted: #94a3b8;
    --lk-text-on-primary: #FFFFFF;
    --lk-border-color: rgba(255, 255, 255, 0.08);
    --lk-overlay: rgba(0, 0, 0, 0.80);
    --lk-drawer-bg: #1e1e1e;

    /* ── Semantic colors ── */
    --lk-success: #22c55e;
    --lk-error: #DC362E;
    --lk-danger-color: #ef4444;
    --lk-danger-color-background: rgba(239, 68, 68, 0.12);
    --lk-tertiary: #818cf8;
    --lk-tertiary-light: rgba(129, 140, 248, 0.12);
    --lk-warning: #fbbf24;
    --lk-warning-light: rgba(251, 191, 36, 0.12);
    --lk-financial: #34d399;
    --lk-financial-light: rgba(52, 211, 153, 0.12);

    /* ── Icon/state helpers ── */
    --lk-icon-muted: #6b7280;
    --lk-icon-destructive: #ef4444;

    /* ── Shadows ── */
    --lk-shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
    --lk-shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);

    /* ── Nav-specific ── */
    --lk-nav-active-bg: rgba(90, 158, 149, 0.10);
    --lk-nav-hover-bg: rgba(90, 158, 149, 0.08);
    --lk-nav-pill-shadow: 0 0 12px rgba(94, 191, 181, 0.4), 3px 0 20px rgba(94, 191, 181, 0.2);
    --lk-nav-scrollbar: rgba(255, 255, 255, 0.1);
    --lk-nav-scrollbar-hover: rgba(255, 255, 255, 0.18);

    /* ── Hero/promo gradients ── */
    --lk-hero-gradient-start: #1A1C1B;
    --lk-hero-gradient-end: #1F2E2B;
    --lk-hero-blob-warm: rgba(62, 123, 112, 0.05);
    --lk-hero-blob-muted: rgba(168, 162, 158, 0.03);
    --lk-promo-blob-green: rgba(62, 123, 112, 0.12);
    --lk-promo-badge-bg: rgba(62, 123, 112, 0.2);

    /* ── Pro CTA card ── */
    --lk-pro-gradient-start: #2C3E37;
    --lk-pro-gradient-end: #36554A;
    --lk-pro-border: rgba(70, 109, 95, 0.4);

    /* ── Quick-Action accent colors ── */
    --lk-qa-orange: #f5a623;
    --lk-qa-purple: #a855f7;
    --lk-qa-indigo: #6e9aff;
    --lk-qa-teal: #26a69a;

    /* ── KPI card palettes ── */
    --lk-kpi-teal-bg: #22493e;
    --lk-kpi-teal-fg: #86dfc5;
    --lk-kpi-amber-bg: #4d3a10;
    --lk-kpi-amber-fg: #fcd380;
    --lk-kpi-red-bg: #4d1a1a;
    --lk-kpi-red-fg: #fca5a5;
    --lk-kpi-blue-bg: #1d3a68;
    --lk-kpi-blue-fg: #93bbf7;
    --lk-kpi-neutral-bg: #374151;
    --lk-kpi-neutral-fg: #d1d5db;

    /* ── Snackbar ── */
    --lk-snack-bg: #2a2d3e;
    --lk-snack-text: #e2e8f0;
    --lk-snack-text-muted: #94a3b8;
    --lk-snack-border: rgba(255, 255, 255, 0.06);
    --lk-snack-close-color: #94a3b8;
    --lk-snack-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.35),
                       0 4px 12px -2px rgba(0, 0, 0, 0.25);
    --lk-snack-action-bg: var(--lk-tertiary);
    --lk-snack-action-text: #FFFFFF;
}