/*
    TEP Documentation design tokens.
    The palette below is the temporary placeholder palette from the specification. When the official TEP
    branding is confirmed, update the values here; every other stylesheet references these variables.
*/
:root {
    --tep-navy: #102C4C;
    --tep-navy-dark: #0B2140;
    --tep-navy-light: #183A62;
    --tep-blue: #245B98;
    --tep-accent: #3C83C5;
    --tep-bg: #F6F8FC;
    --tep-surface: #FFFFFF;
    --tep-surface-muted: #EEF3F9;
    --tep-text: #152E4B;
    --tep-text-muted: #56657A;
    --tep-text-subtle: #64748B;
    --tep-border: #E1E8F0;
    --tep-border-strong: #CBD5E1;
    --tep-accent-soft: #E8F0FA;
    --tep-active-bg: #DCE8F6;
    --tep-focus: #3C83C5;
    --tep-on-dark: #FFFFFF;
    --tep-on-dark-muted: rgba(255, 255, 255, 0.82);

    --tep-note: #245B98;
    --tep-note-bg: #EEF4FC;
    --tep-tip: #1F7A4D;
    --tep-tip-bg: #EDF8F2;
    --tep-important: #6B3FA0;
    --tep-important-bg: #F4EFFB;
    --tep-warning: #8A5A00;
    --tep-warning-border: #E8A317;
    --tep-warning-bg: #FFF7E6;
    --tep-danger: #B42318;
    --tep-danger-bg: #FEF1F0;
    --tep-placeholder: #5B6472;
    --tep-placeholder-bg: #F3F4F6;

    --tep-radius-sm: 0.375rem;
    --tep-radius: 0.625rem;
    --tep-radius-lg: 0.875rem;
    --tep-shadow-sm: 0 1px 2px rgba(16, 44, 76, 0.06);
    --tep-shadow: 0 1px 3px rgba(16, 44, 76, 0.08), 0 6px 16px rgba(16, 44, 76, 0.06);

    --tep-font-sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --tep-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --tep-header-height: 4rem;
    --tep-section-bar-height: 2.75rem;
    --tep-sticky-top: 1rem;
    --tep-content-width: 46rem;

    /* Bootstrap overrides */
    --bs-body-font-family: var(--tep-font-sans);
    --bs-body-color: var(--tep-text);
    --bs-body-bg: var(--tep-bg);
    --bs-emphasis-color: var(--tep-navy);
    --bs-secondary-color: var(--tep-text-muted);
    --bs-link-color: var(--tep-blue);
    --bs-link-color-rgb: 36, 91, 152;
    --bs-link-hover-color: var(--tep-navy);
    --bs-link-hover-color-rgb: 16, 44, 76;
    --bs-border-color: var(--tep-border);
    --bs-primary: var(--tep-blue);
    --bs-primary-rgb: 36, 91, 152;
    --bs-focus-ring-color: rgba(60, 131, 197, 0.35);
}

@media (min-width: 992px) {
    :root {
        --tep-sticky-top: calc(var(--tep-header-height) + var(--tep-section-bar-height) + 1rem);
    }
}