:root {
    /* === Brand Colors === */
    --color-primary-50: #fdf2f8;
    --color-primary-100: #fce7f3;
    --color-primary-200: #fbcfe8;
    --color-primary-300: #f9a8d4;
    --color-primary-400: #f472b6;
    --color-primary-500: #ec4899;
    --color-primary-600: #db2777;
    --color-primary-700: #be185d;
    --color-primary-800: #9d174d;
    --color-primary-900: #831843;
    
    /* === Accent (secondary) === */
    --color-accent: #ec4899;
    --color-accent-light: #f9a8d4;
    --color-accent-dark: #be185d;
    
    /* === Semantic Colors === */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #3b82f6;
    
    /* === Neutral === */
    --color-bg: #f9fafb;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
    --color-text: #111827;
    --color-text-secondary: #6b7280;
    --color-text-muted: #9ca3af;
    
    /* === Sidebar === */
    --sidebar-bg: #ffffff;
    --sidebar-border: #e5e7eb;
    --sidebar-text: #374151;
    --sidebar-text-muted: #9ca3af;
    --sidebar-hover: #f3f4f6;
    --sidebar-active-bg: rgba(236, 72, 153, 0.08);
    --sidebar-active-border: #ec4899;
    --sidebar-active-text: #ec4899;
    
    /* === Topbar === */
    --topbar-bg: rgba(255, 255, 255, 0.8);
    --topbar-border: #e5e7eb;
    
    /* === Charts (from UI_ARCHITECTURE.md Section 12) === */
    --chart-primary: var(--color-accent);
    --chart-secondary: var(--color-accent-light);
    --chart-success: #22c55e;
    --chart-warning: #f59e0b;
    --chart-danger: #ef4444;
    --chart-neutral: #9ca3af;
    --chart-series-1: #6366f1;
    --chart-series-2: #8b5cf6;
    --chart-series-3: #ec4899;
    --chart-series-4: #14b8a6;
    --chart-series-5: #f97316;

    /* === Theme-aware gradients === */
    --theme-gradient-soft: linear-gradient(135deg, var(--color-primary-50), #ffffff 52%, var(--color-primary-100));
    --theme-gradient-strong: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-500));
    
    /* === Spacing === */
    --content-padding: 1.5rem;
    --ops-content-max-width: 100rem;
    --card-padding: 1.5rem;
    --card-radius: 0.75rem;
    
    /* === Shadows === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    
    /* === Transitions === */
    --transition-fast: 150ms ease-in;
    --transition-normal: 200ms ease-out;
    --transition-slow: 300ms ease-in-out;
}

body,
main {
    background-color: var(--color-bg);
}

.app-topbar {
    background-color: var(--topbar-bg) !important;
    border-color: var(--topbar-border) !important;
}

nav.md\:hidden.fixed.bottom-0 {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

#sidebar {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--sidebar-border) !important;
}

#sidebar .bg-white {
    background-color: var(--sidebar-bg) !important;
}

#admin-sidebar {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--sidebar-border) !important;
    color: var(--sidebar-text) !important;
}

#admin-sidebar .border-gray-100,
#admin-sidebar .border-gray-200,
#admin-sidebar .border-slate-100,
#admin-sidebar .border-slate-200 {
    border-color: var(--sidebar-border) !important;
}

#admin-sidebar .text-gray-400,
#admin-sidebar .text-gray-500,
#admin-sidebar .text-gray-600,
#admin-sidebar .text-gray-700,
#admin-sidebar .text-slate-600,
#admin-sidebar .text-slate-950 {
    color: var(--sidebar-text) !important;
}

#admin-sidebar .uppercase,
#admin-sidebar .text-primary-600 {
    color: var(--sidebar-active-text) !important;
}

.admin-shell,
.central-shell,
.admin-shell-content,
.central-shell-content {
    background-color: var(--color-bg) !important;
}

.admin-shell header,
.central-shell header {
    background-color: var(--topbar-bg) !important;
    border-color: var(--topbar-border) !important;
}

#admin-sidebar .hover\:bg-gray-50:hover,
#admin-sidebar .hover\:bg-primary-50:hover,
#admin-sidebar .hover\:text-gray-900:hover,
#admin-sidebar .hover\:text-primary-700:hover {
    background-color: var(--sidebar-hover) !important;
}

/* Dark mode (Phase 2 — define structure now) */
[data-theme="dark"] {
    --color-bg: #111827;
    --color-surface: #1f2937;
    --color-border: #374151;
    --color-text: #f9fafb;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #6b7280;
    --sidebar-bg: #1f2937;
    --sidebar-border: #374151;
    --sidebar-text: #d1d5db;
    --sidebar-hover: #374151;
    --topbar-bg: rgba(31, 41, 55, 0.8);
    --topbar-border: #374151;
}

[data-theme="dark"] body,
[data-theme="dark"] main {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-gray-50 {
    background-color: var(--color-surface) !important;
}

[data-theme="dark"] .bg-gray-100 {
    background-color: #374151 !important;
}

[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
    color: var(--color-text) !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 {
    color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
    border-color: var(--color-border) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: #111827;
    color: var(--color-text);
    border-color: var(--color-border);
}

/* Theme presets (white-label) */
[data-theme-preset="classic-white"] {
    --color-primary-50: #fdf2f8;
    --color-primary-100: #fce7f3;
    --color-primary-200: #fbcfe8;
    --color-primary-300: #f9a8d4;
    --color-primary-400: #f472b6;
    --color-primary-500: #ec4899;
    --color-primary-600: #db2777;
    --color-primary-700: #be185d;
    --color-primary-800: #9d174d;
    --color-primary-900: #831843;
    --color-accent: #ec4899;
    --color-accent-light: #f9a8d4;
    --color-accent-dark: #be185d;
    --color-bg: #f9fafb;
    --color-surface: #f8fafc;
    --sidebar-bg: #f8fafc;
    --topbar-bg: rgba(255,255,255,0.86);
    --topbar-border: #e5e7eb;
    --sidebar-active-border: #ec4899;
    --sidebar-active-text: #ec4899;
}

[data-theme-preset="classic-pink"] {
    --color-primary-50: #fdf2f8;
    --color-primary-100: #fce7f3;
    --color-primary-200: #fbcfe8;
    --color-primary-300: #f9a8d4;
    --color-primary-400: #f472b6;
    --color-primary-500: #ec4899;
    --color-primary-600: #db2777;
    --color-primary-700: #be185d;
    --color-primary-800: #9d174d;
    --color-primary-900: #831843;
    --color-accent: #ec4899;
    --color-bg: #fdf2f8;
    --color-surface: #ffffff;
    --sidebar-bg: #ffffff;
    --topbar-bg: rgba(255,255,255,0.88);
    --topbar-border: #fbcfe8;
    --sidebar-active-border: #ec4899;
    --sidebar-active-text: #ec4899;
}

[data-theme-preset="sage-light"] {
    --color-primary-50: color-mix(in srgb, #65a30d 8%, white);
    --color-primary-100: color-mix(in srgb, #65a30d 16%, white);
    --color-primary-200: color-mix(in srgb, #65a30d 28%, white);
    --color-primary-500: #65a30d;
    --color-primary-600: #65a30d;
    --color-primary-700: color-mix(in srgb, #65a30d 76%, black);
    --color-accent: #65a30d;
    --color-bg: #eef8f3;
    --color-surface: #f0fdf4;
    --sidebar-bg: #f0fdf4;
    --topbar-bg: rgba(246,251,247,0.88);
    --topbar-border: #d8eadc;
    --sidebar-active-border: #65a30d;
    --sidebar-active-text: #65a30d;
}

[data-theme-preset="warm-cream"] {
    --color-primary-50: color-mix(in srgb, #d97706 8%, white);
    --color-primary-100: color-mix(in srgb, #d97706 16%, white);
    --color-primary-200: color-mix(in srgb, #d97706 28%, white);
    --color-primary-500: #d97706;
    --color-primary-600: #d97706;
    --color-primary-700: color-mix(in srgb, #d97706 76%, black);
    --color-accent: #d97706;
    --color-bg: #f7f0e6;
    --color-surface: #fff7ed;
    --sidebar-bg: #fff7ed;
    --topbar-bg: rgba(255,249,239,0.88);
    --topbar-border: #eadfce;
    --sidebar-active-border: #d97706;
    --sidebar-active-text: #d97706;
}

[data-theme-preset="blush-pink"] {
    --color-primary-50: color-mix(in srgb, #db2777 8%, white);
    --color-primary-100: color-mix(in srgb, #db2777 16%, white);
    --color-primary-200: color-mix(in srgb, #db2777 28%, white);
    --color-primary-500: #db2777;
    --color-primary-600: #db2777;
    --color-primary-700: color-mix(in srgb, #db2777 76%, black);
    --color-accent: #db2777;
    --color-bg: #fff5f8;
    --color-surface: #fff1f2;
    --sidebar-bg: #fff1f2;
    --topbar-bg: rgba(255,245,249,0.88);
    --topbar-border: #edd8e2;
    --sidebar-active-border: #db2777;
    --sidebar-active-text: #db2777;
}

[data-theme-preset="sky-minimal"] {
    --color-primary-50: color-mix(in srgb, #0ea5e9 8%, white);
    --color-primary-100: color-mix(in srgb, #0ea5e9 16%, white);
    --color-primary-200: color-mix(in srgb, #0ea5e9 28%, white);
    --color-primary-500: #0ea5e9;
    --color-primary-600: #0ea5e9;
    --color-primary-700: color-mix(in srgb, #0ea5e9 76%, black);
    --color-accent: #0ea5e9;
    --color-bg: #eef7fb;
    --color-surface: #f0f9ff;
    --sidebar-bg: #f0f9ff;
    --topbar-bg: rgba(245,251,255,0.88);
    --topbar-border: #d7e9f5;
    --sidebar-active-border: #0ea5e9;
    --sidebar-active-text: #0ea5e9;
}

[data-theme-preset="lavender-soft"] {
    --color-primary-50: color-mix(in srgb, #8b5cf6 8%, white);
    --color-primary-100: color-mix(in srgb, #8b5cf6 16%, white);
    --color-primary-200: color-mix(in srgb, #8b5cf6 28%, white);
    --color-primary-500: #8b5cf6;
    --color-primary-600: #8b5cf6;
    --color-primary-700: color-mix(in srgb, #8b5cf6 76%, black);
    --color-accent: #8b5cf6;
    --color-bg: #f6f1ff;
    --color-surface: #faf5ff;
    --sidebar-bg: #faf5ff;
    --topbar-bg: rgba(251,248,255,0.88);
    --topbar-border: #e5d9f7;
    --sidebar-active-border: #8b5cf6;
    --sidebar-active-text: #8b5cf6;
}

[data-theme-preset="charcoal-gold"] { --color-primary-500:#d6a85c; --color-primary-600:#d6a85c; --color-primary-700:#b98738; --color-accent:#d6a85c; --color-bg:#f3f4f6; --color-surface:#ffffff; --sidebar-bg:#202733; --sidebar-border:#303a49; --sidebar-text:#f8fafc; --sidebar-hover:rgba(255,255,255,0.08); --sidebar-active-border:#d6a85c; --sidebar-active-text:#d6a85c; --topbar-bg:rgba(255,255,255,0.88); --topbar-border:#d9dde5; }
[data-theme-preset="espresso-rose"] { --color-primary-500:#d98aa8; --color-primary-600:#d98aa8; --color-primary-700:#b96a87; --color-accent:#d98aa8; --color-bg:#f6f1f3; --color-surface:#ffffff; --sidebar-bg:#30242b; --sidebar-border:#46333d; --sidebar-text:#f8fafc; --sidebar-hover:rgba(255,255,255,0.08); --sidebar-active-border:#d98aa8; --sidebar-active-text:#d98aa8; --topbar-bg:rgba(255,255,255,0.88); --topbar-border:#e5d7dd; }
[data-theme-preset="midnight-blue"] { --color-primary-500:#61a8e8; --color-primary-600:#61a8e8; --color-primary-700:#347fc2; --color-accent:#61a8e8; --color-bg:#eef3f9; --color-surface:#ffffff; --sidebar-bg:#17243a; --sidebar-border:#26364f; --sidebar-text:#f8fafc; --sidebar-hover:rgba(255,255,255,0.08); --sidebar-active-border:#61a8e8; --sidebar-active-text:#61a8e8; --topbar-bg:rgba(255,255,255,0.88); --topbar-border:#d4e0ee; }
[data-theme-preset="forest-emerald"] { --color-primary-500:#4ade80; --color-primary-600:#4ade80; --color-primary-700:#22a65a; --color-accent:#4ade80; --color-bg:#eef7f1; --color-surface:#ffffff; --sidebar-bg:#183326; --sidebar-border:#254833; --sidebar-text:#f8fafc; --sidebar-hover:rgba(255,255,255,0.08); --sidebar-active-border:#4ade80; --sidebar-active-text:#4ade80; --topbar-bg:rgba(255,255,255,0.88); --topbar-border:#d4eadb; }
[data-theme-preset="aubergine-luxe"] { --color-primary-500:#b779ff; --color-primary-600:#b779ff; --color-primary-700:#8e4ed6; --color-accent:#b779ff; --color-bg:#f4f0fa; --color-surface:#ffffff; --sidebar-bg:#2b2238; --sidebar-border:#403452; --sidebar-text:#f8fafc; --sidebar-hover:rgba(255,255,255,0.08); --sidebar-active-border:#b779ff; --sidebar-active-text:#b779ff; --topbar-bg:rgba(255,255,255,0.88); --topbar-border:#dfd6ed; }
[data-theme-preset="copper-noir"] { --color-primary-500:#fb923c; --color-primary-600:#fb923c; --color-primary-700:#d66b1f; --color-accent:#fb923c; --color-bg:#f7efe8; --color-surface:#ffffff; --sidebar-bg:#37251a; --sidebar-border:#4f3526; --sidebar-text:#f8fafc; --sidebar-hover:rgba(255,255,255,0.08); --sidebar-active-border:#fb923c; --sidebar-active-text:#fb923c; --topbar-bg:rgba(255,255,255,0.88); --topbar-border:#eadccd; }

[data-theme-preset="charcoal-gold"] #sidebar,
[data-theme-preset="charcoal-gold"] #admin-sidebar,
[data-theme-preset="espresso-rose"] #sidebar,
[data-theme-preset="espresso-rose"] #admin-sidebar,
[data-theme-preset="midnight-blue"] #sidebar,
[data-theme-preset="midnight-blue"] #admin-sidebar,
[data-theme-preset="forest-emerald"] #sidebar,
[data-theme-preset="forest-emerald"] #admin-sidebar,
[data-theme-preset="aubergine-luxe"] #sidebar,
[data-theme-preset="aubergine-luxe"] #admin-sidebar,
[data-theme-preset="copper-noir"] #sidebar,
[data-theme-preset="copper-noir"] #admin-sidebar {
    color: var(--sidebar-text) !important;
}

[data-theme-preset="charcoal-gold"] #sidebar .text-gray-700,
[data-theme-preset="charcoal-gold"] #sidebar .text-gray-600,
[data-theme-preset="espresso-rose"] #sidebar .text-gray-700,
[data-theme-preset="espresso-rose"] #sidebar .text-gray-600,
[data-theme-preset="midnight-blue"] #sidebar .text-gray-700,
[data-theme-preset="midnight-blue"] #sidebar .text-gray-600,
[data-theme-preset="forest-emerald"] #sidebar .text-gray-700,
[data-theme-preset="forest-emerald"] #sidebar .text-gray-600,
[data-theme-preset="aubergine-luxe"] #sidebar .text-gray-700,
[data-theme-preset="aubergine-luxe"] #sidebar .text-gray-600,
[data-theme-preset="copper-noir"] #sidebar .text-gray-700,
[data-theme-preset="copper-noir"] #sidebar .text-gray-600 {
    color: var(--sidebar-text) !important;
}

.theme-gradient-soft {
    background: var(--theme-gradient-soft) !important;
}

.theme-gradient-strong {
    background: var(--theme-gradient-strong) !important;
}

.theme-gradient-border {
    border-color: var(--color-primary-100) !important;
}

[data-theme-preset="rose-gold"] {
    --color-primary-50: color-mix(in srgb, #b76e79 8%, white);
    --color-primary-100: color-mix(in srgb, #b76e79 14%, white);
    --color-primary-200: color-mix(in srgb, #b76e79 24%, white);
    --color-primary-300: color-mix(in srgb, #b76e79 38%, white);
    --color-primary-400: color-mix(in srgb, #b76e79 65%, white);
    --color-primary-500: #b76e79;
    --color-primary-600: color-mix(in srgb, #b76e79 88%, black);
    --color-primary-700: color-mix(in srgb, #b76e79 74%, black);
    --color-primary-800: color-mix(in srgb, #b76e79 58%, black);
    --color-primary-900: color-mix(in srgb, #b76e79 42%, black);
    --color-accent: #b76e79;
    --color-accent-light: #d4a5a5;
    --sidebar-active-bg: rgba(183, 110, 121, 0.08);
    --sidebar-active-border: #b76e79;
    --sidebar-active-text: #b76e79;
}

[data-theme-preset="sage-green"] {
    --color-primary-50: color-mix(in srgb, #6b8f71 8%, white);
    --color-primary-100: color-mix(in srgb, #6b8f71 14%, white);
    --color-primary-200: color-mix(in srgb, #6b8f71 24%, white);
    --color-primary-300: color-mix(in srgb, #6b8f71 38%, white);
    --color-primary-400: color-mix(in srgb, #6b8f71 65%, white);
    --color-primary-500: #6b8f71;
    --color-primary-600: color-mix(in srgb, #6b8f71 88%, black);
    --color-primary-700: color-mix(in srgb, #6b8f71 74%, black);
    --color-primary-800: color-mix(in srgb, #6b8f71 58%, black);
    --color-primary-900: color-mix(in srgb, #6b8f71 42%, black);
    --color-accent: #6b8f71;
    --color-accent-light: #a3c4a3;
    --sidebar-active-bg: rgba(107, 143, 113, 0.08);
    --sidebar-active-border: #6b8f71;
    --sidebar-active-text: #6b8f71;
}

[data-theme-preset="navy-blue"] {
    --color-primary-50: color-mix(in srgb, #1e3a5f 8%, white);
    --color-primary-100: color-mix(in srgb, #1e3a5f 14%, white);
    --color-primary-200: color-mix(in srgb, #1e3a5f 24%, white);
    --color-primary-300: color-mix(in srgb, #1e3a5f 38%, white);
    --color-primary-400: color-mix(in srgb, #1e3a5f 65%, white);
    --color-primary-500: #1e3a5f;
    --color-primary-600: color-mix(in srgb, #1e3a5f 88%, black);
    --color-primary-700: color-mix(in srgb, #1e3a5f 74%, black);
    --color-primary-800: color-mix(in srgb, #1e3a5f 58%, black);
    --color-primary-900: color-mix(in srgb, #1e3a5f 42%, black);
    --color-accent: #1e3a5f;
    --color-accent-light: #5b7fa5;
    --sidebar-active-bg: rgba(30, 58, 95, 0.08);
    --sidebar-active-border: #1e3a5f;
    --sidebar-active-text: #1e3a5f;
}

[data-theme-preset="lavender"] {
    --color-primary-50: color-mix(in srgb, #7c6fa0 8%, white);
    --color-primary-100: color-mix(in srgb, #7c6fa0 14%, white);
    --color-primary-200: color-mix(in srgb, #7c6fa0 24%, white);
    --color-primary-300: color-mix(in srgb, #7c6fa0 38%, white);
    --color-primary-400: color-mix(in srgb, #7c6fa0 65%, white);
    --color-primary-500: #7c6fa0;
    --color-primary-600: color-mix(in srgb, #7c6fa0 88%, black);
    --color-primary-700: color-mix(in srgb, #7c6fa0 74%, black);
    --color-primary-800: color-mix(in srgb, #7c6fa0 58%, black);
    --color-primary-900: color-mix(in srgb, #7c6fa0 42%, black);
    --color-accent: #7c6fa0;
    --color-accent-light: #b8a9d4;
    --sidebar-active-bg: rgba(124, 111, 160, 0.08);
    --sidebar-active-border: #7c6fa0;
    --sidebar-active-text: #7c6fa0;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}