:root {
    --quag-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --quag-space-1: 0.25rem;
    --quag-space-2: 0.5rem;
    --quag-space-3: 0.75rem;
    --quag-space-4: 1rem;
    --quag-space-5: 1.5rem;
    --quag-space-6: 2rem;
    --quag-space-7: 3rem;

    --quag-radius-sm: 0.5rem;
    --quag-radius-md: 0.75rem;
    --quag-radius-lg: 1rem;
    --quag-radius-xl: 1.5rem;
    --quag-radius-pill: 999px;

    --quag-border-subtle: rgba(17, 24, 39, 0.12);
    --quag-shadow-sm: 0 4px 12px rgba(17, 24, 39, 0.08);
    --quag-shadow-md: 0 12px 32px rgba(17, 24, 39, 0.12);
    --quag-control-min-size: 2.75rem;

    --quag-surface-bg: #ffffff;
    --quag-surface-muted: #f8f9fb;
    --quag-surface-strong: #f1f3f7;

    --quag-focus-color: #2563eb;
    --quag-disabled-opacity: 0.58;

    --quag-state-neutral-bg: #f3f4f6;
    --quag-state-neutral-border: #d1d5db;
    --quag-state-neutral-ink: #374151;

    --quag-state-info-bg: #eff6ff;
    --quag-state-info-border: #bfdbfe;
    --quag-state-info-ink: #1e40af;

    --quag-state-success-bg: #ecfdf5;
    --quag-state-success-border: #a7f3d0;
    --quag-state-success-ink: #065f46;

    --quag-state-attention-bg: #fffbeb;
    --quag-state-attention-border: #fde68a;
    --quag-state-attention-ink: #92400e;

    --quag-state-danger-bg: #fef2f2;
    --quag-state-danger-border: #fecaca;
    --quag-state-danger-ink: #991b1b;

    --quag-page-gutter-x: clamp(10px, 1.2vw, 18px);
    --quag-page-gutter-top: clamp(10px, 1.2vh, 18px);
    --quag-page-content-max: none;

    --bs-body-font-family: var(--quag-font-sans);
}

body {
    font-family: var(--quag-font-sans);
    scrollbar-gutter: stable both-edges !important;
}

:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: 3px solid var(--quag-focus-color);
    outline-offset: 2px;
}

:where(button, input, select, textarea):disabled,
[aria-disabled="true"] {
    opacity: var(--quag-disabled-opacity);
    cursor: not-allowed;
}

[aria-disabled="true"] {
    pointer-events: none;
}

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

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

.quag-layout-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-top: var(--quag-page-gutter-top);
    padding-right: var(--quag-page-gutter-x);
    padding-left: var(--quag-page-gutter-x);
}

/* Геометрия страницы задаётся переменными, а не переопределением общего контейнера. */
.page-shell--wide {
    --quag-page-gutter-x: clamp(0.75rem, 2vw, 2rem);
}

.page-shell--normal {
    --quag-page-gutter-x: clamp(0.75rem, 2vw, 1.7rem);
}

.page-shell--roomy {
    --quag-page-gutter-x: clamp(0.75rem, 2.2vw, 2.1rem);
}

.page-shell--compact {
    --quag-page-gutter-x: 0.5rem;
}

.page-shell--reading {
    --quag-page-content-max: 60rem;
}

.page-shell--form {
    --quag-page-content-max: 45rem;
}

.page-shell--edge {
    --quag-page-gutter-x: 0;
    --quag-page-gutter-top: 0;
}

.page-shell--stage {
    --quag-page-content-max: none;
}

.page-shell--flush-top {
    --quag-page-gutter-top: 0;
}

.page-shell--clip-x {
    overflow-x: clip;
}

.app-content > .mb-5 {
    width: 100%;
    max-width: var(--quag-page-content-max);
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .page-shell--mobile-tight {
        --quag-page-gutter-x: 0.55rem;
    }

    .page-shell--mobile-narrow {
        --quag-page-gutter-x: 0.65rem;
    }

    .page-shell--mobile-standard {
        --quag-page-gutter-x: 0.7rem;
    }

    .page-shell--mobile-roomy {
        --quag-page-gutter-x: 0.75rem;
    }

    .page-shell--mobile-edge {
        --quag-page-gutter-x: 0.25rem;
    }
}

@media (max-width: 575.98px) {
    .page-shell--mobile-compact {
        --quag-page-gutter-x: 0.6rem;
    }
}