/*
 * Design tokens: the only place where colours, type and sizes are defined.
 * Everything else uses these variables. The second block maps them onto
 * Bootstrap's own variables, so existing templates pick up the look
 * without touching their markup.
 */
:root {
    --ac-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ac-font-mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --ac-fs-2xs: .6875rem;
    --ac-fs-xs: .75rem;
    --ac-fs-sm: .8125rem;
    --ac-fs-base: .875rem;
    --ac-fs-md: 1rem;
    --ac-fs-lg: 1.125rem;
    --ac-fs-xl: 1.25rem;
    --ac-fs-2xl: 1.5rem;

    --ac-bg: #F2F4F7;
    --ac-surface: #FFFFFF;
    --ac-surface-2: #F7F8FA;
    --ac-border: #E1E6ED;
    --ac-border-strong: #CDD5DF;

    --ac-text: #101B2B;
    --ac-text-2: #4A5870;
    --ac-text-3: #6F7C8F;

    --ac-accent: #2456C6;
    --ac-accent-rgb: 36, 86, 198;
    --ac-accent-hover: #1C47A8;
    --ac-accent-active: #173A87;
    --ac-accent-soft: #E9EFFB;
    --ac-accent-text: #1F4FB8;

    --ac-shell: #0E1726;
    --ac-shell-2: #1A2537;
    --ac-shell-border: #223049;
    --ac-shell-text: #B8C3D3;
    --ac-shell-text-strong: #F3F6FA;

    --ac-data: #2F5D9E;
    --ac-data-soft: rgba(47, 93, 158, .14);
    --ac-grid: #E8ECF1;

    --ac-critical: #B42318;
    --ac-critical-soft: #FDEDEB;
    --ac-warning: #8F6200;
    --ac-warning-soft: #FBF1D6;
    --ac-good: #237A4B;
    --ac-good-soft: #E6F4EC;
    --ac-neutral: #64748B;
    --ac-neutral-2: #C3CBD6;

    --ac-btn-secondary: #4A5870;
    --ac-btn-secondary-rgb: 74, 88, 112;
    --ac-btn-secondary-hover: #3B4659;
    --ac-btn-success: #237A4B;
    --ac-btn-success-rgb: 35, 122, 75;
    --ac-btn-success-hover: #1D6640;
    --ac-btn-success-active: #185536;
    --ac-btn-danger: #B42318;
    --ac-btn-danger-rgb: 180, 35, 24;
    --ac-btn-danger-hover: #9A1D14;
    --ac-btn-danger-active: #7F1810;
    --ac-btn-warning: #E9A800;
    --ac-btn-warning-rgb: 233, 168, 0;
    --ac-btn-warning-hover: #D69A00;
    --ac-btn-warning-text: #2A1E00;
    --ac-btn-info: #0E7490;
    --ac-btn-info-rgb: 14, 116, 144;
    --ac-btn-info-hover: #0B5E75;
    --ac-badge: #D92D20;

    --ac-radius-sm: .375rem;
    --ac-radius: .625rem;
    --ac-shadow-pop: 0 12px 32px -8px rgba(14, 23, 38, .22);

    --ac-topbar-h: 56px;
    --ac-sidebar-w: 248px;
    --ac-page-gutter: 2rem;
}

@media (max-width: 575.98px) {
    :root {
        --ac-page-gutter: 1rem;
    }
}

:root {
    --bs-body-font-family: var(--ac-font);
    --bs-body-color: var(--ac-text);
    --bs-body-color-rgb: 16, 27, 43;
    --bs-emphasis-color: #0B1424;
    --bs-emphasis-color-rgb: 11, 20, 36;
    --bs-secondary-color: #5B687C;
    --bs-secondary-color-rgb: 91, 104, 124;
    --bs-tertiary-bg: var(--ac-surface-2);
    --bs-border-color: var(--ac-border);

    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .625rem;
    --bs-box-shadow-sm: 0 1px 2px rgba(16, 27, 43, .05);
    --bs-box-shadow: 0 8px 24px -8px rgba(16, 27, 43, .18);

    --bs-primary: var(--ac-accent);
    --bs-primary-rgb: var(--ac-accent-rgb);
    --bs-primary-text-emphasis: var(--ac-accent-active);
    --bs-primary-bg-subtle: var(--ac-accent-soft);
    --bs-primary-border-subtle: #BCD0F3;

    --bs-link-color: var(--ac-accent-text);
    --bs-link-color-rgb: 31, 79, 184;
    --bs-link-hover-color: var(--ac-accent-active);
    --bs-link-hover-color-rgb: 23, 58, 135;
    --bs-focus-ring-color: rgba(var(--ac-accent-rgb), .25);
}