:root {
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 9999px;

    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;

    --rs-font-size-2xs: 0.6076rem;
    --rs-font-size-xs: 0.7292rem;
    --rs-font-size-base: 0.875rem;
    --rs-font-size-md: 1.05rem;
    --rs-font-size-lg: 1.26rem;
    --rs-font-size-xl: 1.512rem;
    --rs-font-size-2xl: 1.8144rem;
    --rs-font-size-3xl: 2.1773rem;
    --rs-font-size-4xl: 2.6127rem;
    --rs-font-size-caption: var(--rs-font-size-2xs);
    --rs-font-size-small: var(--rs-font-size-xs);
    --rs-font-size-body: var(--rs-font-size-base);
    --rs-font-size-lead: var(--rs-font-size-md);
}

:root[data-admin-theme="dark"] {
    color-scheme: dark;

    --bg-page: #0b0f13;
    --bg-sidebar: #10151a;
    --bg-panel: #151b22;
    --bg-elevated: #1b232c;
    --bg-input: #12181f;
    --bg-hover: #202933;
    --bg-table-alt: rgba(18, 24, 31, 0.55);

    --text-primary: #e7eff5;
    --text-secondary: #99a9b8;
    --text-disabled: #5e6f80;
    --text-inverse: #081117;

    --accent: #21b8f7;
    --accent-hover: #5dcdf9;
    --accent-subtle: rgba(33, 184, 247, 0.14);
    --focus-ring: #21b8f7;

    --status-success: #30d39a;
    --status-success-bg: rgba(48, 211, 154, 0.12);
    --status-success-border: rgba(48, 211, 154, 0.28);
    --status-warning: #ffb700;
    --status-warning-bg: rgba(255, 183, 0, 0.12);
    --status-warning-border: rgba(255, 183, 0, 0.28);
    --status-error: #e72320;
    --status-error-bg: rgba(231, 35, 32, 0.12);
    --status-error-border: rgba(231, 35, 32, 0.28);
    --status-info: #21b8f7;
    --status-info-bg: rgba(33, 184, 247, 0.12);
    --status-info-border: rgba(33, 184, 247, 0.28);

    --border: #25303b;
    --border-strong: #33414e;
    --border-input: #2c3945;
    --border-focus: #21b8f7;
    --border-subtle: rgba(255, 255, 255, 0.12);
    --border-subtle-soft: rgba(148, 163, 184, 0.16);
    --border-subtle-strong: rgba(148, 163, 184, 0.26);

    --sidebar-nav-hover: #16202a;
    --sidebar-nav-active: rgba(33, 184, 247, 0.12);
    --sidebar-nav-accent: #21b8f7;

    --btn-primary-bg: #21b8f7;
    --btn-primary-text: #081117;
    --btn-primary-hover: #5dcdf9;
    --btn-secondary-bg: #10161d;
    --btn-secondary-text: #e7eff5;
    --btn-secondary-border: #445565;
    --btn-secondary-hover: #18212a;
    --btn-secondary-hover-border: #566a7e;
    --btn-danger-bg: rgba(248, 113, 113, 0.08);
    --btn-danger-text: #fca5a5;
    --btn-danger-border: rgba(248, 113, 113, 0.3);
    --btn-danger-hover: rgba(248, 113, 113, 0.14);
    --btn-danger-hover-text: #fecaca;
    --btn-danger-hover-border: rgba(248, 113, 113, 0.45);
    --btn-ghost-text: #99a9b8;
    --btn-ghost-hover: #1b232c;
    --btn-warning-hover: #ffc533;

    --code-bg: #12181f;
    --code-text: #8adcfb;

    --scrollbar-thumb: #25303b;
    --scrollbar-track: #10151a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);

    --overlay-backdrop: rgba(0, 0, 0, 0.65);
    --surface-muted: rgba(255, 255, 255, 0.02);
    --surface-subtle: rgba(255, 255, 255, 0.04);
    --divider-fade: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.12) 12%,
        rgba(255, 255, 255, 0.12) 88%,
        rgba(255, 255, 255, 0));
    --badge-muted-bg: rgba(153, 169, 184, 0.12);
    --alert-warning-bg: linear-gradient(
        135deg,
        rgba(255, 183, 0, 0.18),
        rgba(255, 183, 0, 0.1));
    --brand-logo-filter: none;
    --brand-banner-bg: transparent;
}

:root[data-admin-theme="light"] {
    color-scheme: light;

    --bg-page: #edf3f8;
    --bg-sidebar: #f7fbfe;
    --bg-panel: #ffffff;
    --bg-elevated: #f8fbfe;
    --bg-input: #ffffff;
    --bg-hover: #ebf2f7;
    --bg-table-alt: rgba(15, 35, 58, 0.04);

    --text-primary: #162433;
    --text-secondary: #5f7284;
    --text-disabled: #8a9aab;
    --text-inverse: #ffffff;

    --accent: #0f8fcb;
    --accent-hover: #0b78ab;
    --accent-subtle: rgba(15, 143, 203, 0.12);
    --focus-ring: #0f8fcb;

    --status-success: #0a7653;
    --status-success-bg: rgba(10, 118, 83, 0.12);
    --status-success-border: rgba(10, 118, 83, 0.24);
    --status-warning: #8f5d00;
    --status-warning-bg: rgba(143, 93, 0, 0.12);
    --status-warning-border: rgba(143, 93, 0, 0.24);
    --status-error: #b42323;
    --status-error-bg: rgba(180, 35, 35, 0.1);
    --status-error-border: rgba(180, 35, 35, 0.24);
    --status-info: #0b6f9e;
    --status-info-bg: rgba(11, 111, 158, 0.12);
    --status-info-border: rgba(11, 111, 158, 0.24);

    --border: #d5e0ea;
    --border-strong: #b8c9d9;
    --border-input: #c5d5e4;
    --border-focus: #0f8fcb;
    --border-subtle: rgba(22, 36, 51, 0.16);
    --border-subtle-soft: rgba(95, 114, 132, 0.18);
    --border-subtle-strong: rgba(95, 114, 132, 0.28);

    --sidebar-nav-hover: #edf4f9;
    --sidebar-nav-active: rgba(15, 143, 203, 0.1);
    --sidebar-nav-accent: #0f8fcb;

    --btn-primary-bg: #0f8fcb;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #0b78ab;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: #1e2d3d;
    --btn-secondary-border: #c5d5e4;
    --btn-secondary-hover: #f2f7fb;
    --btn-secondary-hover-border: #aac0d2;
    --btn-danger-bg: rgba(180, 35, 35, 0.08);
    --btn-danger-text: #8d1b1b;
    --btn-danger-border: rgba(180, 35, 35, 0.24);
    --btn-danger-hover: rgba(180, 35, 35, 0.14);
    --btn-danger-hover-text: #7f1919;
    --btn-danger-hover-border: rgba(180, 35, 35, 0.32);
    --btn-ghost-text: #5f7284;
    --btn-ghost-hover: #eef4f8;
    --btn-warning-hover: #7a5000;

    --code-bg: #f5f9fc;
    --code-text: #0c7fb5;

    --scrollbar-thumb: #c4d3e0;
    --scrollbar-track: #eef4f8;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 18px 48px rgba(16, 24, 40, 0.12);

    --overlay-backdrop: rgba(10, 18, 28, 0.35);
    --surface-muted: rgba(15, 35, 58, 0.03);
    --surface-subtle: rgba(15, 35, 58, 0.05);
    --divider-fade: linear-gradient(
        180deg,
        rgba(15, 35, 58, 0),
        rgba(15, 35, 58, 0.12) 12%,
        rgba(15, 35, 58, 0.12) 88%,
        rgba(15, 35, 58, 0));
    --badge-muted-bg: rgba(95, 114, 132, 0.12);
    --alert-warning-bg: linear-gradient(
        135deg,
        rgba(143, 93, 0, 0.18),
        rgba(143, 93, 0, 0.1));
    --brand-logo-filter: none;
    --brand-banner-bg: linear-gradient(
        135deg,
        rgba(15, 143, 203, 0.08),
        rgba(15, 143, 203, 0.02));
}

button.admin-modal-close-button,
.admin-modal-close-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    min-width: 2.125rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

button.admin-modal-close-button:hover,
.admin-modal-close-button:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
    color: var(--text-primary);
}

button.admin-modal-close-button:active,
.admin-modal-close-button:active {
    box-shadow: none;
}

button.admin-modal-close-button:disabled,
.admin-modal-close-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.admin-modal-close-button__icon {
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}