:root {
    color-scheme: dark;
    --color-bg: #071625;
    --color-bg-strong: #06111f;
    --color-surface: #0b1c30;
    --color-surface-2: #12253a;
    --color-surface-3: #1b3047;
    --color-text: #f7fbff;
    --color-muted: #aebdca;
    --color-soft: #738597;
    --color-border: rgba(255, 255, 255, 0.09);
    --color-primary: #f4c430;
    --color-primary-soft: #ffd86b;
    --color-secondary: #168a35;
    --color-brand-ink: #073f1d;
    --color-neon-green: #69ff87;
    --color-danger: #ff4b6a;
    --color-warning: #ffcc33;
    --color-success: #33c45a;
    --shadow-glow: 0 0 20px rgba(244, 196, 48, 0.3);
    --shadow-yellow: 0 0 20px rgba(244, 196, 48, 0.3);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --sidebar-width: 260px;
    --topbar-height: 64px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --color-bg: #f8faff;
        --color-bg-strong: #ecf3ff;
        --color-surface: #ffffff;
        --color-surface-2: #eef5ff;
        --color-surface-3: #dfeaf9;
        --color-text: #0b1c30;
        --color-muted: #42566b;
        --color-soft: #6f8194;
        --color-border: rgba(11, 28, 48, 0.1);
        --shadow-glow: 0 0 16px rgba(244, 196, 48, 0.24);
        --shadow-yellow: 0 0 16px rgba(244, 196, 48, 0.24);
    }
}

html[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #071625;
    --color-bg-strong: #06111f;
    --color-surface: #0b1c30;
    --color-surface-2: #12253a;
    --color-surface-3: #1b3047;
    --color-text: #f7fbff;
    --color-muted: #aebdca;
    --color-soft: #738597;
    --color-border: rgba(255, 255, 255, 0.09);
}

html[data-theme="light"] {
    color-scheme: light;
    --color-bg: #f8faff;
    --color-bg-strong: #ecf3ff;
    --color-surface: #ffffff;
    --color-surface-2: #eef5ff;
    --color-surface-3: #dfeaf9;
    --color-text: #0b1c30;
    --color-muted: #42566b;
    --color-soft: #6f8194;
    --color-border: rgba(11, 28, 48, 0.1);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--color-bg);
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 72% 9%, rgba(244, 196, 48, 0.22), transparent 28%),
        radial-gradient(circle at 96% 28%, rgba(22, 138, 53, 0.05), transparent 20%),
        linear-gradient(180deg, var(--color-bg-strong), var(--color-bg));
    color: var(--color-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
    line-height: 1;
}

.material-symbols-outlined.fill {
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hidden {
    display: none !important;
}