:root {
    --color-background: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-primary: #B71C1C;
    --color-primary-depth: #7F1010;
    --color-accent: #C62828;
    --color-secondary: #FFFFFF;
    --color-text: #1F1F1F;
    --text-secondary: #5A5A5A;
    --text-muted: #8C8C8C;
    --color-border: #E7D5D5;
    --color-inactive: #C9BDBD;
    --gradient-primary: linear-gradient(135deg, #B71C1C 0%, #7F1010 100%);
    --gradient-accent: linear-gradient(135deg, #C62828 0%, #B71C1C 100%);
    --surface-border-soft: #E7D5D5;
    --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: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-secondary: #FFFFFF;
    --color-text: #1F1F1F;
    --text-secondary: #5A5A5A;
    --text-muted: #8C8C8C;
    --color-border: #E7D5D5;
    --color-inactive: #C9BDBD;
    --surface-border-soft: #E7D5D5;
    --surface-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
    --surface-shadow-strong: 0 4px 14px rgba(0, 0, 0, 0.10);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-background: #FFFFFF;
        --color-surface: #FFFFFF;
        --color-secondary: #FFFFFF;
        --color-text: #1F1F1F;
        --text-secondary: #5A5A5A;
        --text-muted: #8C8C8C;
        --color-border: #E7D5D5;
        --color-inactive: #C9BDBD;
        --surface-border-soft: #E7D5D5;
        --surface-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
        --surface-shadow-strong: 0 4px 14px rgba(0, 0, 0, 0.10);
    }
}

*,
*::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;
}