* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: rgb(248, 238, 222);
    --surface: #ffffff;
    --surface-hover: #f5f5f5;
    --border: rgba(58, 57, 58, 0.2);

    --text: rgb(58, 57, 58);
    --text-muted: rgba(58, 57, 58, 0.7);

    --accent: rgb(236, 103, 54);
    --accent-hover: #d1562b;
    --accent-glow: rgba(236, 103, 54, 0.1);

    --success: #16a34a;
    --warning: #d97706;
    --error: #dc2626;
    --radius: 8px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
}

#app {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

header {
    text-align: center;
    margin-bottom: 2rem;
}

.hidden {
    display: none !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

button:focus-visible,
input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}