/**
 * DesiBill — design tokens (multi-theme).
 * Applied on documentElement via data-theme="light|dark|ocean|forest|sunset"
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Shared scale */
:root {
    --app-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --app-radius-sm: 8px;
    --app-radius: 12px;
    --app-radius-lg: 16px;
    --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --app-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    --app-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
    --app-sidebar-width: 16.25rem;
}

/* ----- Light (default) ----- */
html[data-theme="light"],
html:not([data-theme]) {
    color-scheme: light;
    --app-bg: #f1f5f9;
    --app-bg-gradient: linear-gradient(165deg, #f8fafc 0%, #e2e8f0 55%, #f1f5f9 100%);
    --app-surface: #ffffff;
    --app-surface-2: #f8fafc;
    --app-border: rgba(15, 23, 42, 0.08);
    --app-border-strong: rgba(15, 23, 42, 0.12);
    --app-text: #0f172a;
    --app-text-muted: #64748b;
    --app-primary: #2563eb;
    --app-primary-rgb: 37, 99, 235;
    --app-primary-soft: rgba(37, 99, 235, 0.12);
    --app-accent: #0891b2;
    --app-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    --app-sidebar-border: rgba(15, 23, 42, 0.06);
    --app-sidebar-text: #334155;
    --app-sidebar-icon: #64748b;
    --app-sidebar-active-bg: rgba(37, 99, 235, 0.1);
    --app-sidebar-active-text: #1d4ed8;
    --app-navbar-bg: rgba(255, 255, 255, 0.82);
    --app-navbar-border: rgba(15, 23, 42, 0.06);
    --app-footer-bg: transparent;
    --app-input-bg: #fff;
    --app-card-shadow: var(--app-shadow);
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-body-bg: #f1f5f9;
    --bs-body-color: #0f172a;
    --bs-border-color: #e2e8f0;
    --bs-link-color: #2563eb;
}

/* ----- Dark ----- */
html[data-theme="dark"] {
    color-scheme: dark;
    --app-bg: #0b1220;
    --app-bg-gradient: linear-gradient(165deg, #0f172a 0%, #0b1220 50%, #020617 100%);
    --app-surface: #111827;
    --app-surface-2: #0f172a;
    --app-border: rgba(148, 163, 184, 0.12);
    --app-border-strong: rgba(148, 163, 184, 0.2);
    --app-text: #f1f5f9;
    --app-text-muted: #94a3b8;
    --app-primary: #60a5fa;
    --app-primary-rgb: 96, 165, 250;
    --app-primary-soft: rgba(96, 165, 250, 0.15);
    --app-accent: #22d3ee;
    --app-sidebar-bg: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    --app-sidebar-border: rgba(148, 163, 184, 0.1);
    --app-sidebar-text: #e2e8f0;
    --app-sidebar-icon: #94a3b8;
    --app-sidebar-active-bg: rgba(96, 165, 250, 0.15);
    --app-sidebar-active-text: #93c5fd;
    --app-navbar-bg: rgba(15, 23, 42, 0.85);
    --app-navbar-border: rgba(148, 163, 184, 0.1);
    --app-footer-bg: transparent;
    --app-input-bg: #1e293b;
    --app-card-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --bs-primary: #60a5fa;
    --bs-primary-rgb: 96, 165, 250;
    --bs-body-bg: #0b1220;
    --bs-body-color: #f1f5f9;
    --bs-border-color: #334155;
    --bs-link-color: #93c5fd;
}

/* ----- Ocean (teal / slate SaaS) ----- */
html[data-theme="ocean"] {
    color-scheme: light;
    --app-bg: #ecfeff;
    --app-bg-gradient: linear-gradient(165deg, #f0fdfa 0%, #e0f2fe 45%, #ecfeff 100%);
    --app-surface: #ffffff;
    --app-surface-2: #f0fdfa;
    --app-border: rgba(13, 148, 136, 0.12);
    --app-border-strong: rgba(13, 148, 136, 0.2);
    --app-text: #134e4a;
    --app-text-muted: #5b908a;
    --app-primary: #0d9488;
    --app-primary-rgb: 13, 148, 136;
    --app-primary-soft: rgba(13, 148, 136, 0.12);
    --app-accent: #0284c7;
    --app-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
    --app-sidebar-border: rgba(13, 148, 136, 0.08);
    --app-sidebar-text: #115e59;
    --app-sidebar-icon: #0f766e;
    --app-sidebar-active-bg: rgba(13, 148, 136, 0.12);
    --app-sidebar-active-text: #0f766e;
    --app-navbar-bg: rgba(255, 255, 255, 0.9);
    --app-navbar-border: rgba(13, 148, 136, 0.1);
    --app-input-bg: #fff;
    --app-card-shadow: 0 8px 28px rgba(13, 148, 136, 0.1);
    --bs-primary: #0d9488;
    --bs-primary-rgb: 13, 148, 136;
    --bs-body-bg: #ecfeff;
    --bs-body-color: #134e4a;
    --bs-border-color: #ccfbf1;
    --bs-link-color: #0d9488;
}

/* ----- Forest (warm green) ----- */
html[data-theme="forest"] {
    color-scheme: light;
    --app-bg: #f7fee7;
    --app-bg-gradient: linear-gradient(165deg, #fefce8 0%, #ecfccb 50%, #f7fee7 100%);
    --app-surface: #ffffff;
    --app-surface-2: #f7fee7;
    --app-border: rgba(101, 163, 13, 0.15);
    --app-border-strong: rgba(77, 124, 15, 0.22);
    --app-text: #1a2e05;
    --app-text-muted: #5c6b2f;
    --app-primary: #4d7c0f;
    --app-primary-rgb: 77, 124, 15;
    --app-primary-soft: rgba(77, 124, 15, 0.12);
    --app-accent: #ca8a04;
    --app-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f7fee7 100%);
    --app-sidebar-border: rgba(101, 163, 13, 0.12);
    --app-sidebar-text: #365314;
    --app-sidebar-icon: #4d7c0f;
    --app-sidebar-active-bg: rgba(77, 124, 15, 0.12);
    --app-sidebar-active-text: #3f6212;
    --app-navbar-bg: rgba(255, 255, 255, 0.88);
    --app-navbar-border: rgba(101, 163, 13, 0.12);
    --app-input-bg: #fff;
    --app-card-shadow: 0 8px 28px rgba(77, 124, 15, 0.1);
    --bs-primary: #4d7c0f;
    --bs-primary-rgb: 77, 124, 15;
    --bs-body-bg: #f7fee7;
    --bs-body-color: #1a2e05;
    --bs-border-color: #d9f99d;
    --bs-link-color: #4d7c0f;
}

/* ----- Sunset (rose / violet) ----- */
html[data-theme="sunset"] {
    color-scheme: light;
    --app-bg: #fff1f2;
    --app-bg-gradient: linear-gradient(165deg, #fdf4ff 0%, #ffe4e6 40%, #fff1f2 100%);
    --app-surface: #ffffff;
    --app-surface-2: #fff7ed;
    --app-border: rgba(225, 29, 72, 0.1);
    --app-border-strong: rgba(190, 24, 93, 0.16);
    --app-text: #4c0519;
    --app-text-muted: #9f1239;
    --app-primary: #be123c;
    --app-primary-rgb: 190, 18, 60;
    --app-primary-soft: rgba(190, 18, 60, 0.1);
    --app-accent: #7c3aed;
    --app-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%);
    --app-sidebar-border: rgba(190, 18, 60, 0.08);
    --app-sidebar-text: #881337;
    --app-sidebar-icon: #be123c;
    --app-sidebar-active-bg: rgba(190, 18, 60, 0.1);
    --app-sidebar-active-text: #9f1239;
    --app-navbar-bg: rgba(255, 255, 255, 0.9);
    --app-navbar-border: rgba(190, 18, 60, 0.08);
    --app-input-bg: #fff;
    --app-card-shadow: 0 8px 28px rgba(190, 18, 60, 0.08);
    --bs-primary: #be123c;
    --bs-primary-rgb: 190, 18, 60;
    --bs-body-bg: #fff1f2;
    --bs-body-color: #4c0519;
    --bs-border-color: #fecdd3;
    --bs-link-color: #be123c;
}

/* ----- Midnight (blue-black neon) ----- */
html[data-theme="midnight"] {
    color-scheme: dark;
    --app-bg: #030712;
    --app-bg-gradient: linear-gradient(165deg, #111827 0%, #030712 50%, #020617 100%);
    --app-surface: #0f172a;
    --app-surface-2: #111827;
    --app-border: rgba(96, 165, 250, 0.16);
    --app-border-strong: rgba(96, 165, 250, 0.24);
    --app-text: #e2e8f0;
    --app-text-muted: #93c5fd;
    --app-primary: #38bdf8;
    --app-primary-rgb: 56, 189, 248;
    --app-primary-soft: rgba(56, 189, 248, 0.16);
    --app-accent: #818cf8;
    --app-sidebar-bg: linear-gradient(180deg, #0f172a 0%, #030712 100%);
    --app-sidebar-border: rgba(96, 165, 250, 0.14);
    --app-sidebar-text: #cbd5e1;
    --app-sidebar-icon: #7dd3fc;
    --app-sidebar-active-bg: rgba(56, 189, 248, 0.16);
    --app-sidebar-active-text: #7dd3fc;
    --app-navbar-bg: rgba(15, 23, 42, 0.9);
    --app-navbar-border: rgba(96, 165, 250, 0.18);
    --app-input-bg: #0f172a;
    --app-card-shadow: 0 14px 42px rgba(2, 6, 23, 0.58);
    --bs-primary: #38bdf8;
    --bs-primary-rgb: 56, 189, 248;
    --bs-body-bg: #030712;
    --bs-body-color: #e2e8f0;
    --bs-border-color: #1e293b;
    --bs-link-color: #7dd3fc;
}

/* ----- Aurora ----- */
html[data-theme="aurora"] {
    color-scheme: light;
    --app-bg: #eefcf6;
    --app-bg-gradient: linear-gradient(165deg, #f0fdf4 0%, #e0f2fe 45%, #ecfeff 100%);
    --app-surface: #ffffff;
    --app-surface-2: #f0fdf4;
    --app-border: rgba(16, 185, 129, 0.14);
    --app-border-strong: rgba(16, 185, 129, 0.2);
    --app-text: #064e3b;
    --app-text-muted: #0f766e;
    --app-primary: #10b981;
    --app-primary-rgb: 16, 185, 129;
    --app-primary-soft: rgba(16, 185, 129, 0.12);
    --app-accent: #06b6d4;
    --app-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #ecfeff 100%);
    --app-sidebar-border: rgba(16, 185, 129, 0.1);
    --app-sidebar-text: #065f46;
    --app-sidebar-icon: #0d9488;
    --app-sidebar-active-bg: rgba(16, 185, 129, 0.12);
    --app-sidebar-active-text: #047857;
    --app-navbar-bg: rgba(255, 255, 255, 0.9);
    --app-navbar-border: rgba(16, 185, 129, 0.12);
    --app-input-bg: #fff;
    --app-card-shadow: 0 10px 30px rgba(16, 185, 129, 0.08);
    --bs-primary: #10b981;
    --bs-primary-rgb: 16, 185, 129;
    --bs-body-bg: #eefcf6;
    --bs-body-color: #064e3b;
    --bs-border-color: #bbf7d0;
    --bs-link-color: #10b981;
}

/* ----- Royal ----- */
html[data-theme="royal"] {
    color-scheme: dark;
    --app-bg: #100826;
    --app-bg-gradient: linear-gradient(165deg, #1e1b4b 0%, #100826 50%, #111827 100%);
    --app-surface: #1f1b3a;
    --app-surface-2: #221c45;
    --app-border: rgba(167, 139, 250, 0.2);
    --app-border-strong: rgba(167, 139, 250, 0.28);
    --app-text: #ede9fe;
    --app-text-muted: #c4b5fd;
    --app-primary: #8b5cf6;
    --app-primary-rgb: 139, 92, 246;
    --app-primary-soft: rgba(139, 92, 246, 0.2);
    --app-accent: #f472b6;
    --app-sidebar-bg: linear-gradient(180deg, #1e1b4b 0%, #100826 100%);
    --app-sidebar-border: rgba(167, 139, 250, 0.18);
    --app-sidebar-text: #ddd6fe;
    --app-sidebar-icon: #c4b5fd;
    --app-sidebar-active-bg: rgba(139, 92, 246, 0.24);
    --app-sidebar-active-text: #ddd6fe;
    --app-navbar-bg: rgba(31, 27, 58, 0.88);
    --app-navbar-border: rgba(167, 139, 250, 0.2);
    --app-input-bg: #221c45;
    --app-card-shadow: 0 14px 38px rgba(17, 24, 39, 0.55);
    --bs-primary: #8b5cf6;
    --bs-primary-rgb: 139, 92, 246;
    --bs-body-bg: #100826;
    --bs-body-color: #ede9fe;
    --bs-border-color: #3730a3;
    --bs-link-color: #c4b5fd;
}

html {
    font-family: var(--app-font);
}

html[data-theme="dark"] {
    --bs-heading-color: #f8fafc;
}