:root {
    --ink: #12131c;
    --ink-2: #191b26;
    --surface: #1e2130;
    --surface-raised: #262a3c;
    --hairline: rgba(243, 239, 231, 0.09);
    --amber: #e8a059;
    --indigo: #4a4e7c;
    --rose: #c97b84;
    --paper: #f3efe7;
    --fog: #9498a8;
    --fog-dim: #6b6f80;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    --radius-lg: 22px;
    --radius-md: 14px;
    --ease: cubic-bezier(.22, .9, .32, 1);
    --app-accent-color: var(--amber);
}

html, body {
    -webkit-font-smoothing: antialiased;
}

.dark {
    --app-bg: #12131c;
    --card-bg: #191b26;
    --text-primary: #f3efe7;
    --text-secondary: #9498a8;
    --text-tertiary: #6b6f80;
    --border-color: rgba(243, 239, 231, 0.09);
}

h1, h2, h3 {
    margin: 0;
}

.mono {
    letter-spacing: 0.02em;
}

button {
    font-family: inherit;
}

:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}