html {
    color-scheme: light;
    scroll-behavior: smooth;
}

body {
    background: var(--ds-page);
    color: var(--ds-text);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-font-size-body);
    line-height: var(--ds-line-height);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(8, 179, 226, .24);
    color: var(--ds-brand-950);
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(255, 255, 255, .96);
    outline-offset: 3px;
    box-shadow: var(--ds-ring);
}

:where(input, select, textarea):focus-visible {
    outline-color: var(--ds-brand-500);
    outline-offset: 0;
}

img,
svg {
    max-width: 100%;
}

.button,
.btn,
button {
    font-family: inherit;
    letter-spacing: -.005em;
}

.button,
.btn {
    transition:
        color var(--ds-transition),
        background-color var(--ds-transition),
        border-color var(--ds-transition),
        box-shadow var(--ds-transition),
        transform var(--ds-transition);
}

.button:not(.disabled):hover,
.btn:not(:disabled):hover {
    transform: translateY(-2px);
}

.button:not(.disabled):active,
.btn:not(:disabled):active {
    transform: translateY(0);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border-radius: var(--ds-radius-sm);
    accent-color: var(--ds-brand-600);
    transition:
        border-color var(--ds-transition),
        box-shadow var(--ds-transition),
        background-color var(--ds-transition);
}

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

.muted {
    color: var(--ds-muted) !important;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-sm);
    scrollbar-width: thin;
    scrollbar-color: var(--ds-line-strong) transparent;
}

.empty-state {
    border: 1px dashed var(--ds-line-strong);
    border-radius: var(--ds-radius-md);
    padding: clamp(1rem, 3vw, 2rem);
    background: var(--ds-surface-soft);
    text-align: center;
}

.login-shell,
.auth-panel,
.form-panel {
    border-color: var(--ds-line);
    box-shadow: var(--ds-shadow-lg);
}

.login-form input,
.auth-panel input {
    min-height: 46px;
}

@media (max-width: 640px) {
    :where(.button, .btn, button, input, select) {
        min-height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}