:root {
    --brand: #3263D9;
    --brand-hover: #234DB8;
    --ink: #17325E;
    --secondary: #64738C;
    --surface: #fff;
    --surface-soft: #F6F9FE;
    --surface-blue: #ECF2FC;
    --border: #DCE4F1;
    --radius-control: 11px;
    --radius-card: 22px;
    --content-width: 1240px;
    --page-gutter: 48px;
    --header-height: 86px;
    --site-font: 'Blogger Sans','Trebuchet MS',Arial,sans-serif;
    --focus: #95701B;
    --blue: var(--brand);
    --blue-hover: var(--brand-hover);
    --navy: var(--ink);
    --muted: var(--secondary);
    --sky: var(--surface-blue);
    --ice: var(--surface-soft);
    --line: var(--border);
    --white: var(--surface);
    --font: var(--site-font);
    --container: var(--content-width);
    --bn-blue: var(--brand);
    --bn-blue-hover: var(--brand-hover);
    --bn-navy: var(--ink);
    --bn-muted: var(--secondary);
    --bn-sky: var(--surface-blue);
    --bn-bg: var(--surface-soft);
    --bn-line: var(--border);
    --bn-white: var(--surface);
    --bn-font: var(--site-font);
    --co-blue: var(--brand);
    --co-hover: var(--brand-hover);
    --co-navy: var(--ink);
    --co-muted: var(--secondary);
    --co-line: var(--border);
    --co-sky: var(--surface-blue);
    --co-bg: var(--surface-soft);
    --co-font: var(--site-font);
}
@media(max-width:1100px) {
    :root {
        --page-gutter: 32px;
        --header-height: 76px;
    }
}
@media(max-width:767px) {
    :root {
        --page-gutter: 20px;
        --header-height: 72px;
    }
}
@media(max-width:375px) {
    :root {
        --page-gutter: 16px;
    }
}