:root {
    color-scheme: light;
    --color-bg-app: #f2f2f2;
    --color-surface-primary: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-subtle: #f5f6f8;
    --color-surface-popup: #ffffff;
    --color-text-primary: #1f3a68;
    --color-text-base: #1f2937;
    --color-text-secondary: #6b7280;
    --color-text-inverse: #ffffff;
    --color-accent: #003b67;
    --color-accent-soft: #004e85;
    --color-divider: #c4c4c4;
    --color-border-soft: #e5e7eb;
    --color-border-strong: #d1d5db;
    --color-chip-bg: #f4f6f8;
    --color-chip-border: #e2e8f0;
    --color-badge-bg: #f1f5f9;
    --color-badge-orange-bg: #fff0e3;
    --color-badge-purple-bg: #f4e6ff;
    --color-badge-blue-bg: #e5efff;
    --color-badge-green-bg: #e8f6ef;
    --color-badge-cyan-bg: #e7f7ff;
    --color-badge-pink-bg: #ffe7f3;
    --color-badge-gray-bg: #eef1f4;
    --color-danger: #f87171;
    --color-danger-text: #ffffff;
    --color-surface-hover: #eef2ff;
    --shadow-menu: 2px 0 10px rgba(0, 0, 0, 0.1);
    --shadow-popup: 0 16px 45px rgba(0, 0, 0, 0.14);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --icon-filter: invert(38%) sepia(96%) saturate(668%) hue-rotate(338deg) brightness(96%) contrast(91%);
    --transition-base: 0.2s ease;
}

.dark-theme {
    color-scheme: dark;
    --color-bg-app: #21283A;
    --color-surface-primary: #273048;
    --color-surface-elevated: #2f3954;
    --color-surface-subtle: #32405c;
    --color-surface-popup: #2d3752;
    --color-text-primary: #f5f7ff;
    --color-text-base: #e2e6f3;
    --color-text-secondary: #c4cbe0;
    --color-text-inverse: #1a202c;
    --color-accent: #7ab8ff;
    --color-accent-soft: #93c7ff;
    --color-divider: #3a4664;
    --color-border-soft: #34415c;
    --color-border-strong: #455375;
    --color-chip-bg: #2b3550;
    --color-chip-border: #3a4664;
    --color-badge-bg: #323d5a;
    --color-badge-orange-bg: #4a3628;
    --color-badge-purple-bg: #3d2a4a;
    --color-badge-blue-bg: #1e3a5f;
    --color-badge-green-bg: #1a3d2e;
    --color-badge-cyan-bg: #1a3e4d;
    --color-badge-pink-bg: #4d1a3a;
    --color-badge-gray-bg: #2a3441;
    --color-danger: #f87171;
    --color-danger-text: #ffffff;
    --color-surface-hover: #3a4664;
    --shadow-menu: 0 18px 46px rgba(0, 0, 0, 0.55);
    --shadow-popup: 0 24px 60px rgba(0, 0, 0, 0.6);
    --shadow-inset: inset 0 1px 0 rgba(0, 0, 0, 0.6);
    --icon-filter: invert(92%) sepia(8%) saturate(594%) hue-rotate(179deg) brightness(105%) contrast(97%);
}

html, body {
    background-color: var(--color-bg-app);
    color: var(--color-text-base);
    transition: background-color var(--transition-base), color var(--transition-base);
}

a {
    color: inherit;
}

button {
    color: inherit;
}