:root {
    --brand-color: #EA580C;
    --brand-50: 255 247 237;
    --brand-100: 255 237 213;
    --brand-200: 254 215 170;
    --brand-300: 253 186 116;
    --brand-400: 251 146 60;
    --brand-500: 249 115 22;
    --brand-600: 234 88 12;
    --brand-700: 194 65 12;
    --brand-800: 154 52 18;
    --brand-900: 124 45 18;
    --brand-950: 67 20 7;
}

html {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
    --dark-bg: #05070b;
    --dark-bg-deep: #0b0f16;
    --dark-surface: #11161f;
    --dark-surface-soft: #181e29;
}

body {
    background-attachment: fixed;
}

.theme-shell {
    background-color: rgb(248 250 252);
    background-image:
        radial-gradient(circle at top left, rgb(var(--brand-600) / 0.12), transparent 30%),
        radial-gradient(circle at bottom right, rgb(var(--brand-400) / 0.14), transparent 32%);
}

html.dark body {
    background-color: var(--dark-bg);
}

html.dark .theme-shell {
    background-color: var(--dark-bg);
    background-image:
        radial-gradient(circle at top left, rgb(var(--brand-700) / 0.12), transparent 24%),
        radial-gradient(circle at bottom right, rgb(var(--brand-900) / 0.08), transparent 28%),
        linear-gradient(180deg, rgba(10, 12, 18, 0.98) 0%, rgba(5, 7, 11, 1) 100%);
}

.bg-grid-slate {
    background-image:
        linear-gradient(to right, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
}

html.dark .bg-grid-slate {
    background-image:
        linear-gradient(to right, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

[data-sidebar-backdrop].is-open {
    display: block;
}

[data-sidebar].is-open {
    transform: translateX(0);
}

[data-flash-message] {
    animation: slide-down 180ms ease-out;
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}