:root {
    --color-page-bg: #f5f7fb;
    --color-text-main: #1f2937;
    --color-text-strong: #111827;
    --color-text-muted: #475467;
    --color-text-subtle: #344054;
    --color-text-inverse: #ffffff;

    --color-border-card: #d7dce3;
    --color-border-input: #d0d5dd;
    --color-border-button: #c7d0db;
    --color-border-button-hover: #98a2b3;

    --color-surface: #ffffff;
    --color-surface-soft: #f8fafc;
    --color-surface-tooltip: #475467;

    --color-focus: #5b8def;

    --color-primary: #2f6feb;
    --color-primary-hover: #255fd1;
    --color-primary-soft: #eef4ff;
    --color-primary-border-soft: #bfd3ff;
    --color-primary-text: #1849a9;
    --color-primary-text-inverse: #ffffff;

    --color-title-block: #475467;
    --color-section-title-accent: #475467;

    --color-danger: #d92d20;
    --color-danger-soft: #fff5f4;

    --color-overlay: rgba(15, 23, 42, 0.18);

    --radius-base: 3px;
    --radius-tooltip: 10px;
    --radius-pill: 999px;

    --page-content-max-width: 1280px;

    --responsive-page-font-size: 1rem;
    --responsive-page-heading-padding: 16px 18px;
    --responsive-page-heading-title-size: 28px;
    --responsive-section-padding: 16px;
    --responsive-section-title-size: 18px;
    --responsive-card-title-size: 18px;
    --responsive-dense-font-size: 0.9375rem;
    --responsive-message-font-size: 0.9rem;
    --responsive-small-title-size: 1.05rem;
    --responsive-small-note-size: 0.9rem;
}

@media (max-width: 767px) {
    :root {
        --responsive-page-font-size: 0.9375rem;
        --responsive-page-heading-padding: 14px;
        --responsive-page-heading-title-size: 24px;
        --responsive-section-padding: 14px;
        --responsive-section-title-size: 16px;
        --responsive-card-title-size: 16px;
    }
}

@media (max-width: 480px) {
    :root {
        --responsive-page-heading-padding: 12px;
        --responsive-page-heading-title-size: 22px;
    }
}