:root,
html[data-theme="premium-dark"] {
    color-scheme: dark;

    /* Core palette */
    --primary: #f8fafc;
    --primary-dark: #e2e8f0;

    /* Legacy aliases kept for compatibility */
    --surface: #0a0a0a;
    --surface-soft: #111111;
    --background: #000000;
    --text: #ffffff;
    --text-soft: #d4d4d8;
    --muted: #a1a1aa;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    --sidebar-bg: #050505;
    --sidebar-surface: #0d0d0d;
    --sidebar-text: #ffffff;
    --sidebar-muted: #9ca3af;

    /* Theme architecture tokens */
    --color-bg: #000000;
    --color-bg-gradient-start: #000000;
    --color-bg-gradient-end: #040404;
    --color-bg-radial: rgba(255, 255, 255, 0.03);

    --color-surface-1: #050505;
    --color-surface-2: #0b0b0b;
    --color-surface-3: #111111;
    --color-surface-4: #141414;

    --surface-gradient-1: linear-gradient(180deg, rgba(12, 12, 12, 0.98) 0%, rgba(6, 6, 6, 0.99) 100%);
    --surface-gradient-2: linear-gradient(180deg, rgba(20, 20, 20, 0.98) 0%, rgba(12, 12, 12, 0.98) 100%);
    --surface-gradient-3: linear-gradient(180deg, rgba(14, 14, 14, 0.98) 0%, rgba(8, 8, 8, 0.99) 100%);
    --surface-hero-gradient: linear-gradient(180deg, rgba(20, 20, 20, 0.98) 0%, rgba(12, 12, 12, 0.98) 100%);
    --surface-header-gradient: linear-gradient(180deg, rgba(12, 12, 12, 0.98) 0%, rgba(6, 6, 6, 0.99) 100%);
    --surface-header-glow: var(--color-bg-radial);
    --surface-hero-glow: color-mix(in srgb, var(--color-bg-radial) 140%, transparent);
    --surface-card-highlight: inset 0 1px 0 var(--color-bg-radial);
    --surface-pill-neutral-bg: var(--status-info-bg);
    --surface-pill-neutral-border: var(--status-info-border);
    --surface-pill-neutral-text: var(--status-info-text);
    --surface-interactive-neutral-bg: color-mix(in srgb, var(--status-info-bg) 42%, transparent);
    --surface-interactive-neutral-bg-strong: color-mix(in srgb, var(--status-info-bg) 56%, transparent);
    --surface-interactive-neutral-bg-hover: color-mix(in srgb, var(--status-info-bg) 80%, transparent);
    --surface-interactive-neutral-border: var(--border);
    --surface-interactive-neutral-border-hover: var(--color-hover-border);
    --sidebar-gradient: linear-gradient(180deg, #040404 0%, #0b0b0b 100%);
    --sidebar-brand-gradient: linear-gradient(180deg, rgba(4, 4, 4, 0.98) 0%, rgba(10, 10, 10, 0.96) 100%);
    --sidebar-account-gradient: linear-gradient(180deg, rgba(4, 4, 4, 0.98) 0%, rgba(10, 10, 10, 0.98) 100%);

    --color-text: #ffffff;
    --color-text-strong: #ffffff;
    --color-text-soft: #d4d4d8;
    --color-text-muted: #a1a1aa;
    --color-link: #ffffff;

    --color-input-bg: #0b0b0b;
    --color-input-bg-focus: #111111;
    --color-placeholder: #7c7c85;
    --color-focus-ring: rgba(255, 255, 255, 0.08);

    --color-button-primary-bg: #ffffff;
    --color-button-primary-text: #000000;
    --color-button-primary-bg-hover: #e5e7eb;

    --color-button-secondary-bg: #111111;
    --color-button-secondary-text: #ffffff;
    --color-button-secondary-bg-hover: #1a1a1a;

    --color-hover-surface: rgba(255, 255, 255, 0.08);
    --color-hover-border: rgba(255, 255, 255, 0.28);

    --status-success-bg: rgba(34, 197, 94, 0.16);
    --status-success-text: #bbf7d0;
    --status-success-border: rgba(34, 197, 94, 0.28);

    --status-danger-bg: rgba(239, 68, 68, 0.16);
    --status-danger-text: #fecaca;
    --status-danger-border: rgba(239, 68, 68, 0.26);

    --status-warning-bg: rgba(245, 158, 11, 0.16);
    --status-warning-text: #fde68a;
    --status-warning-border: rgba(245, 158, 11, 0.28);

    --status-info-bg: rgba(255, 255, 255, 0.06);
    --status-info-text: #e5e7eb;
    --status-info-border: rgba(255, 255, 255, 0.12);

    --sidebar-logout-bg: rgba(239, 68, 68, 0.14);
    --sidebar-logout-bg-hover: rgba(239, 68, 68, 0.22);
    --sidebar-logout-text: #fecaca;
    --sidebar-logout-text-hover: #ffffff;

    --scrollbar-thumb-start: rgba(161, 161, 170, 0.82);
    --scrollbar-thumb-end: rgba(113, 113, 122, 0.96);
    --scrollbar-thumb-hover-start: rgba(229, 231, 235, 0.96);
    --scrollbar-thumb-hover-end: rgba(161, 161, 170, 0.96);
    --scrollbar-track: rgba(18, 18, 18, 0.34);
    --scrollbar-border: rgba(18, 18, 18, 0.22);

    --radius: 18px;
    --radius-sm: 16px;
    --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.34);
    --shadow-md: 0 20px 48px rgba(0, 0, 0, 0.46);
    --surface-soft-border: rgba(255, 255, 255, 0.08);
    --surface-elevated: var(--surface-gradient-1);
    --surface-elevated-strong: var(--surface-gradient-2);
    --surface-inner: var(--surface-gradient-3);
    --surface-empty: linear-gradient(180deg, rgba(13, 13, 13, 0.98) 0%, rgba(8, 8, 8, 0.99) 100%);
    --surface-table-head: rgba(18, 18, 18, 0.98);
    --surface-table-row-hover: rgba(255, 255, 255, 0.03);
    --surface-card-shadow: var(--shadow-sm);
    --surface-card-shadow-strong: var(--shadow-md);
}

html[data-theme="premium-light"] {
    color-scheme: light;

    --primary: #111827;
    --primary-dark: #0f172a;

    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --background: #eef2f7;
    --text: #111827;
    --text-soft: #334155;
    --muted: #64748b;
    --border: rgba(15, 23, 42, 0.10);
    --border-strong: rgba(15, 23, 42, 0.18);
    --sidebar-bg: #f4f7fb;
    --sidebar-surface: #ffffff;
    --sidebar-text: #111827;
    --sidebar-muted: #64748b;

    --color-bg: #eef2f7;
    --color-bg-gradient-start: #f5f7fb;
    --color-bg-gradient-end: #e8edf5;
    --color-bg-radial: rgba(15, 23, 42, 0.04);

    --color-surface-1: #ffffff;
    --color-surface-2: #f8fafc;
    --color-surface-3: #f1f5f9;
    --color-surface-4: #eaf0f7;

    --surface-gradient-1: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 252, 0.99) 100%);
    --surface-gradient-2: linear-gradient(180deg, rgba(251, 253, 255, 0.98) 0%, rgba(243, 247, 252, 0.99) 100%);
    --surface-gradient-3: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(241, 246, 252, 0.99) 100%);
    --surface-hero-gradient: linear-gradient(180deg, rgba(251, 253, 255, 0.98) 0%, rgba(243, 247, 252, 0.99) 100%);
    --surface-header-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 252, 0.99) 100%);
    --surface-header-glow: var(--color-bg-radial);
    --surface-hero-glow: color-mix(in srgb, var(--color-bg-radial) 82%, transparent);
    --surface-card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    --surface-pill-neutral-bg: rgba(15, 23, 42, 0.05);
    --surface-pill-neutral-border: rgba(15, 23, 42, 0.12);
    --surface-pill-neutral-text: var(--status-info-text);
    --surface-interactive-neutral-bg: color-mix(in srgb, var(--status-info-bg) 42%, transparent);
    --surface-interactive-neutral-bg-strong: color-mix(in srgb, var(--status-info-bg) 56%, transparent);
    --surface-interactive-neutral-bg-hover: color-mix(in srgb, var(--status-info-bg) 80%, transparent);
    --surface-interactive-neutral-border: var(--border);
    --surface-interactive-neutral-border-hover: var(--color-hover-border);
    --sidebar-gradient: linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
    --sidebar-brand-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 252, 0.98) 100%);
    --sidebar-account-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 247, 251, 0.98) 100%);

    --color-text: #111827;
    --color-text-strong: #0f172a;
    --color-text-soft: #334155;
    --color-text-muted: #64748b;
    --color-link: #0f172a;

    --color-input-bg: #ffffff;
    --color-input-bg-focus: #ffffff;
    --color-placeholder: #94a3b8;
    --color-focus-ring: rgba(15, 23, 42, 0.10);

    --color-button-primary-bg: #111827;
    --color-button-primary-text: #ffffff;
    --color-button-primary-bg-hover: #0f172a;

    --color-button-secondary-bg: #ffffff;
    --color-button-secondary-text: #111827;
    --color-button-secondary-bg-hover: #f8fafc;

    --color-hover-surface: rgba(15, 23, 42, 0.05);
    --color-hover-border: rgba(15, 23, 42, 0.24);

    --status-success-bg: rgba(22, 163, 74, 0.12);
    --status-success-text: #166534;
    --status-success-border: rgba(22, 163, 74, 0.24);

    --status-danger-bg: rgba(220, 38, 38, 0.12);
    --status-danger-text: #991b1b;
    --status-danger-border: rgba(220, 38, 38, 0.24);

    --status-warning-bg: rgba(217, 119, 6, 0.12);
    --status-warning-text: #92400e;
    --status-warning-border: rgba(217, 119, 6, 0.24);

    --status-info-bg: rgba(15, 23, 42, 0.06);
    --status-info-text: #334155;
    --status-info-border: rgba(15, 23, 42, 0.14);

    --sidebar-logout-bg: rgba(220, 38, 38, 0.10);
    --sidebar-logout-bg-hover: rgba(220, 38, 38, 0.18);
    --sidebar-logout-text: #991b1b;
    --sidebar-logout-text-hover: #7f1d1d;

    --scrollbar-thumb-start: rgba(148, 163, 184, 0.84);
    --scrollbar-thumb-end: rgba(100, 116, 139, 0.94);
    --scrollbar-thumb-hover-start: rgba(71, 85, 105, 0.94);
    --scrollbar-thumb-hover-end: rgba(51, 65, 85, 0.94);
    --scrollbar-track: rgba(226, 232, 240, 0.72);
    --scrollbar-border: rgba(226, 232, 240, 0.68);

    --shadow-sm: 0 10px 28px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 20px 48px rgba(15, 23, 42, 0.12);
    --surface-soft-border: rgba(15, 23, 42, 0.10);
    --surface-elevated: var(--surface-gradient-1);
    --surface-elevated-strong: var(--surface-gradient-2);
    --surface-inner: var(--surface-gradient-3);
    --surface-empty: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 252, 0.99) 100%);
    --surface-table-head: rgba(241, 245, 249, 0.95);
    --surface-table-row-hover: rgba(15, 23, 42, 0.03);
    --surface-card-shadow: var(--shadow-sm);
    --surface-card-shadow-strong: var(--shadow-md);
}

html[data-theme="dark-accent"] {
    color-scheme: dark;

    --primary: #f7f7f0;
    --primary-dark: #eef5dd;

    --surface: #657166;
    --surface-soft: #72806f;
    --background: #5c685b;
    --text: #f7f7f0;
    --text-soft: #eef5dd;
    --muted: #dae8e3;
    --border: rgba(238, 245, 221, 0.14);
    --border-strong: rgba(238, 245, 221, 0.22);
    --sidebar-bg: #5d695c;
    --sidebar-surface: #6b7868;
    --sidebar-text: #f7f7f0;
    --sidebar-muted: #e1e7bd;

    --color-bg: #657166;
    --color-bg-gradient-start: #6a7569;
    --color-bg-gradient-end: #5d685c;
    --color-bg-radial: rgba(153, 205, 216, 0.10);

    --color-surface-1: #7b8674;
    --color-surface-2: #889278;
    --color-surface-3: #93a07d;
    --color-surface-4: #9faa85;

    --surface-gradient-1: linear-gradient(180deg, rgba(126, 139, 118, 0.96) 0%, rgba(107, 119, 102, 0.98) 100%);
    --surface-gradient-2: linear-gradient(180deg, rgba(147, 160, 125, 0.96) 0%, rgba(123, 134, 116, 0.98) 100%);
    --surface-gradient-3: linear-gradient(180deg, rgba(137, 149, 120, 0.96) 0%, rgba(116, 128, 109, 0.98) 100%);
    --surface-hero-gradient: linear-gradient(135deg, rgba(218, 232, 227, 0.18) 0%, rgba(253, 232, 211, 0.10) 22%, rgba(147, 160, 125, 0.92) 48%, rgba(101, 113, 102, 0.98) 100%);
    --surface-header-gradient: linear-gradient(135deg, rgba(153, 205, 216, 0.18) 0%, rgba(253, 232, 211, 0.12) 20%, rgba(141, 152, 120, 0.90) 55%, rgba(104, 115, 103, 0.98) 100%);
    --surface-header-glow: rgba(218, 232, 227, 0.12);
    --surface-hero-glow: rgba(253, 232, 211, 0.14);
    --surface-card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --surface-pill-neutral-bg: rgba(238, 245, 221, 0.10);
    --surface-pill-neutral-border: rgba(238, 245, 221, 0.18);
    --surface-pill-neutral-text: #f7f7f0;
    --surface-interactive-neutral-bg: rgba(238, 245, 221, 0.08);
    --surface-interactive-neutral-bg-strong: rgba(238, 245, 221, 0.12);
    --surface-interactive-neutral-bg-hover: rgba(253, 232, 211, 0.16);
    --surface-interactive-neutral-border: var(--border);
    --surface-interactive-neutral-border-hover: var(--color-hover-border);
    --sidebar-gradient: linear-gradient(180deg, #697566 0%, #5f695d 100%);
    --sidebar-brand-gradient: linear-gradient(180deg, rgba(225, 231, 189, 0.10) 0%, rgba(111, 123, 105, 0.95) 100%);
    --sidebar-account-gradient: linear-gradient(180deg, rgba(225, 231, 189, 0.08) 0%, rgba(111, 123, 105, 0.96) 100%);

    --color-text: #f7f7f0;
    --color-text-strong: #ffffff;
    --color-text-soft: #eef5dd;
    --color-text-muted: #dae8e3;
    --color-link: #f7f7f0;

    --color-input-bg: rgba(86, 96, 84, 0.72);
    --color-input-bg-focus: rgba(98, 109, 96, 0.84);
    --color-placeholder: #dae8e3;
    --color-focus-ring: rgba(153, 205, 216, 0.18);

    --color-button-primary-bg: #e1e7bd;
    --color-button-primary-text: #4d584d;
    --color-button-primary-bg-hover: #dae8e3;

    --color-button-secondary-bg: rgba(238, 245, 221, 0.08);
    --color-button-secondary-text: #f7f7f0;
    --color-button-secondary-bg-hover: rgba(253, 232, 211, 0.14);

    --color-hover-surface: rgba(238, 245, 221, 0.08);
    --color-hover-border: rgba(153, 205, 216, 0.28);

    --status-success-bg: rgba(185, 195, 145, 0.18);
    --status-success-text: #f7f7f0;
    --status-success-border: rgba(225, 231, 189, 0.24);

    --status-danger-bg: rgba(243, 195, 178, 0.18);
    --status-danger-text: #fff2ec;
    --status-danger-border: rgba(243, 195, 178, 0.24);

    --status-warning-bg: rgba(253, 232, 211, 0.18);
    --status-warning-text: #fff7ef;
    --status-warning-border: rgba(253, 232, 211, 0.24);

    --status-info-bg: rgba(153, 205, 216, 0.12);
    --status-info-text: #f7f7f0;
    --status-info-border: rgba(153, 205, 216, 0.20);

    --sidebar-logout-bg: rgba(243, 195, 178, 0.16);
    --sidebar-logout-bg-hover: rgba(243, 195, 178, 0.22);
    --sidebar-logout-text: #fff4ee;
    --sidebar-logout-text-hover: #ffffff;

    --scrollbar-thumb-start: rgba(225, 231, 189, 0.72);
    --scrollbar-thumb-end: rgba(185, 195, 145, 0.90);
    --scrollbar-thumb-hover-start: rgba(218, 232, 227, 0.94);
    --scrollbar-thumb-hover-end: rgba(225, 231, 189, 0.96);
    --scrollbar-track: rgba(95, 105, 93, 0.36);
    --scrollbar-border: rgba(95, 105, 93, 0.24);

    --shadow-sm: 0 10px 28px rgba(54, 61, 52, 0.18);
    --shadow-md: 0 20px 48px rgba(54, 61, 52, 0.24);
    --surface-soft-border: rgba(238, 245, 221, 0.12);
    --surface-elevated: var(--surface-gradient-1);
    --surface-elevated-strong: var(--surface-gradient-2);
    --surface-inner: var(--surface-gradient-3);
    --surface-empty: linear-gradient(180deg, rgba(125, 137, 117, 0.94) 0%, rgba(105, 116, 101, 0.98) 100%);
    --surface-table-head: rgba(78, 88, 74, 0.78);
    --surface-table-row-hover: rgba(238, 245, 221, 0.05);
    --surface-card-shadow: var(--shadow-sm);
    --surface-card-shadow-strong: var(--shadow-md);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at top, var(--color-bg-radial), transparent 24%),
        linear-gradient(180deg, var(--color-bg-gradient-start) 0%, var(--color-bg-gradient-end) 100%);
    color: var(--color-text);
    font-family: Inter, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
    min-height: 100vh;
}

a {
    color: var(--color-link);
    text-decoration: none;
}