:root,
[data-theme="dark"] {
    --font-base: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-display: 'Segoe UI Variable Display', 'Segoe UI Semibold', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    --bg-primary: #14161a;
    --bg-secondary: #282933;
    --bg-tertiary: #41444e;
    --bg-card: rgba(40, 41, 51, 0.92);
    --bg-card-solid: #282933;
    --bg-hover: rgba(255, 255, 255, 0.08);
    --bg-input: rgba(20, 22, 26, 0.92);
    --surface-raised: #1f2026;
    --surface-raised-hover: #262831;
    --surface-raised-border: rgba(255, 255, 255, 0.08);
    --shell-bar-bg: rgba(40, 41, 51, 0.9);
    --shell-bar-border: #41444e;
    --shell-bar-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    --shell-input-bg: #14161a;
    --shell-input-border: #41444e;
    --shell-input-focus: rgba(142, 77, 255, 0.28);
    --shell-footer-bg: #282933;
    --shell-footer-border: #41444e;

    --text-primary: #ebecf0;
    --text-secondary: #a4a8b2;
    --text-muted: #8593ab;
    --text-link: #8e4dff;

    --accent-primary: #8e4dff;
    --accent-secondary: #ab7aff;
    --accent-tertiary: #c6a6ff;
    --accent-gradient: linear-gradient(135deg, #712ee5 0%, #8e4dff 100%);
    --accent-gradient-animated: linear-gradient(270deg, #712ee5, #8e4dff, #712ee5);
    --accent-glow: rgba(142, 77, 255, 0.26);
    --accent-glow-pink: rgba(142, 77, 255, 0.12);

    --control-height: 40px;
    --control-height-lg: 48px;
    --control-padding-x: 18px;
    --control-radius: var(--border-radius-sm);
    --control-text: var(--text-primary);
    --control-placeholder: var(--text-muted);
    --control-bg: var(--bg-input);
    --control-bg-hover: rgba(28, 31, 38, 0.96);
    --control-bg-focus: var(--bg-input);
    --control-border: transparent;
    --control-border-hover: transparent;
    --control-border-focus: var(--accent-primary);
    --control-shadow: none;
    --control-focus-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 0 20px rgba(99, 102, 241, 0.1);
    --control-backdrop: blur(10px);

    --button-primary-bg: #7c3aed;
    --button-primary-bg-hover: #7c3aed;
    --button-primary-text: #ffffff;
    --button-primary-border: transparent;
    --button-primary-shadow: none;
    --button-primary-shadow-hover: none;
    --button-secondary-bg: var(--surface-raised);
    --button-secondary-bg-hover: var(--surface-raised-hover);
    --button-secondary-text: var(--control-text);
    --button-secondary-border: transparent;
    --button-secondary-border-hover: transparent;
    --button-success-bg: #16a34a;
    --button-success-bg-hover: #16a34a;
    --button-success-text: #ffffff;
    --button-danger-bg: #dc2626;
    --button-danger-bg-hover: #dc2626;
    --button-danger-text: #ffffff;
    --pill-bg: var(--surface-raised);
    --pill-bg-hover: var(--surface-raised-hover);
    --pill-text: #ffffff;
    --pill-bg-active: var(--button-primary-bg);
    --pill-text-active: #ffffff;
    --search-bg: rgba(52, 54, 70, 0.96);
    --search-bg-focus: var(--control-bg-focus);
    --search-border: transparent;
    --search-border-focus: var(--control-border-focus);
    --search-shadow: var(--control-shadow);
    --select-bg: var(--control-bg);
    --select-bg-focus: var(--control-bg-focus);
    --select-border: transparent;
    --select-border-focus: var(--control-border-focus);
    --select-text: var(--control-text);
    --select-placeholder: var(--control-placeholder);
    --select-shadow: var(--control-shadow);
    --select-focus-shadow: var(--control-focus-shadow);

    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.15);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.15);
    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.15);

    --border-color: #41444e;
    --border-hover: #515561;
    --border-glow: rgba(142, 77, 255, 0.2);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px var(--accent-glow);
    --shadow-glow-strong: 0 0 60px var(--accent-glow), 0 0 100px var(--accent-glow-pink);

    --header-height: 76px;
    --content-max-width: 1238px;
    --sidebar-width: 280px;
    --border-radius: 16px;
    --border-radius-sm: 10px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px;

    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
    --font-base: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-display: 'Segoe UI Variable Display', 'Segoe UI Semibold', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    --bg-primary: #ffffff;
    --bg-secondary: #f6f6f8;
    --bg-tertiary: #ebebef;
    --bg-card: rgba(255, 255, 255, 0.97);
    --bg-card-solid: #ffffff;
    --bg-hover: rgba(0, 0, 0, 0.045);
    --bg-input: rgba(255, 255, 255, 0.98);
    --surface-raised: #f4f7fb;
    --surface-raised-hover: #e9eef6;
    --surface-raised-border: rgba(148, 163, 184, 0.2);
    --shell-bar-bg: rgba(238, 241, 246, 0.9);
    --shell-bar-border: rgba(25, 32, 45, 0.08);
    --shell-bar-shadow: 0 8px 22px rgba(17, 24, 39, 0.08);
    --shell-input-bg: #ffffff;
    --shell-input-border: rgba(25, 32, 45, 0.08);
    --shell-input-focus: rgba(142, 77, 255, 0.24);
    --shell-footer-bg: #f0f2f6;
    --shell-footer-border: rgba(25, 32, 45, 0.08);

    --text-primary: #1a1a1f;
    --text-secondary: #5e5e66;
    --text-muted: #8e8e95;
    --text-link: #8e4dff;

    --accent-primary: #8e4dff;
    --accent-secondary: #ab7aff;
    --accent-tertiary: #c6a6ff;
    --accent-gradient: linear-gradient(135deg, #712ee5 0%, #8e4dff 100%);
    --accent-gradient-animated: linear-gradient(270deg, #712ee5, #8e4dff, #712ee5);
    --accent-glow: rgba(142, 77, 255, 0.22);
    --accent-glow-pink: rgba(171, 122, 255, 0.12);

    --control-height: 40px;
    --control-height-lg: 48px;
    --control-padding-x: 18px;
    --control-radius: var(--border-radius-sm);
    --control-text: var(--text-primary);
    --control-placeholder: var(--text-muted);
    --control-bg: var(--bg-input);
    --control-bg-hover: #f7f9fc;
    --control-bg-focus: #ffffff;
    --control-border: transparent;
    --control-border-hover: transparent;
    --control-border-focus: var(--accent-primary);
    --control-shadow: none;
    --control-focus-shadow: 0 0 0 4px rgba(142, 77, 255, 0.12), 0 0 20px rgba(142, 77, 255, 0.08);
    --control-backdrop: blur(10px);

    --button-primary-bg: #7c3aed;
    --button-primary-bg-hover: #7c3aed;
    --button-primary-text: #ffffff;
    --button-primary-border: transparent;
    --button-primary-shadow: none;
    --button-primary-shadow-hover: none;
    --button-secondary-bg: var(--surface-raised);
    --button-secondary-bg-hover: var(--surface-raised-hover);
    --button-secondary-text: var(--control-text);
    --button-secondary-border: transparent;
    --button-secondary-border-hover: transparent;
    --button-success-bg: #16a34a;
    --button-success-bg-hover: #16a34a;
    --button-success-text: #ffffff;
    --button-danger-bg: #dc2626;
    --button-danger-bg-hover: #dc2626;
    --button-danger-text: #ffffff;
    --pill-bg: var(--surface-raised);
    --pill-bg-hover: var(--surface-raised-hover);
    --pill-text: var(--text-primary);
    --pill-bg-active: var(--button-primary-bg);
    --pill-text-active: #ffffff;
    --search-bg: var(--control-bg);
    --search-bg-focus: var(--control-bg-focus);
    --search-border: transparent;
    --search-border-focus: var(--control-border-focus);
    --search-shadow: var(--control-shadow);
    --select-bg: var(--control-bg);
    --select-bg-focus: var(--control-bg-focus);
    --select-border: transparent;
    --select-border-focus: var(--control-border-focus);
    --select-text: var(--control-text);
    --select-placeholder: var(--control-placeholder);
    --select-shadow: var(--control-shadow);
    --select-focus-shadow: var(--control-focus-shadow);

    --success: #16a34a;
    --success-bg: rgba(22, 163, 74, 0.1);
    --warning: #d97706;
    --warning-bg: rgba(217, 119, 6, 0.1);
    --danger: #dc2626;
    --danger-bg: rgba(220, 38, 38, 0.1);
    --info: #2563eb;
    --info-bg: rgba(37, 99, 235, 0.1);

    --border-color: rgba(0, 0, 0, 0.1);
    --border-hover: rgba(0, 0, 0, 0.2);
    --border-glow: rgba(142, 77, 255, 0.16);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 40px var(--accent-glow);
    --shadow-glow-strong: 0 0 60px var(--accent-glow), 0 0 100px var(--accent-glow-pink);
}