:root {
    --color-background: #FFF3E0;
    --color-surface: #FFFFFF;
    --color-primary: #F57C00;
    --color-primary-depth: #E65100;
    --color-accent: #FFC107;
    --color-secondary: #FFFFFF;
    --color-text: #2E2E2E;
    --text-secondary: #6D6D6D;
    --text-muted: #9E9E9E;
    --color-border: #FFE0B2;
    --color-inactive: #BDBDBD;
    --gradient-primary: linear-gradient(135deg, #F57C00 0%, #E65100 100%);
    --gradient-accent: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
    --surface-border-soft: #FFE0B2;
    --surface-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
    --surface-shadow-strong: 0 4px 14px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] {
    --color-background: #121218;
    --color-surface: #1C1C26;
    --color-secondary: #1C1C26;
    --color-text: #F5F5F5;
    --text-secondary: #A8A8B3;
    --text-muted: #6B6B78;
    --color-border: rgba(245, 124, 0, 0.14);
    --color-inactive: #505060;
    --surface-border-soft: rgba(245, 124, 0, 0.14);
    --surface-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.24);
    --surface-shadow-strong: 0 4px 14px rgba(0, 0, 0, 0.32);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-background: #121218;
        --color-surface: #1C1C26;
        --color-secondary: #1C1C26;
        --color-text: #F5F5F5;
        --text-secondary: #A8A8B3;
        --text-muted: #6B6B78;
        --color-border: rgba(245, 124, 0, 0.14);
        --color-inactive: #505060;
        --surface-border-soft: rgba(245, 124, 0, 0.14);
        --surface-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.24);
        --surface-shadow-strong: 0 4px 14px rgba(0, 0, 0, 0.32);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Inter", Arial, sans-serif;
    color: var(--color-text);
    background: var(--color-background);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
    color: inherit;
}

.ui-icon {
    width: 24px;
    height: 24px;
}