/*
 * BCPost v2 design foundation
 *
 * This file is the sole source of truth for public-site colour, typography,
 * spacing, sizing, radius, shadow, motion, container, media, and layer tokens.
 * Components and page-family styles should consume these variables rather
 * than introducing independent visual values.
 */

:root {
    color-scheme: light;

    /* Logo-derived brand palette */
    --bc-color-brand-ink: #001347;
    --bc-color-brand-navy: #07183f;
    --bc-color-brand-red: #d5010f;
    --bc-color-brand-blue: #004edc;
    --bc-color-brand-sky: #328dfd;
    --bc-color-brand-white: #fdfdfd;

    /* Supporting primitives */
    --bc-color-white: #ffffff;
    --bc-color-slate-25: #fbfcfd;
    --bc-color-slate-50: #f6f7f9;
    --bc-color-slate-100: #eef2f7;
    --bc-color-slate-150: #e7ecf2;
    --bc-color-slate-200: #d7dee7;
    --bc-color-slate-300: #b8c4d3;
    --bc-color-slate-500: #64748b;
    --bc-color-slate-600: #475569;
    --bc-color-slate-700: #334155;
    --bc-color-slate-800: #1f2937;
    --bc-color-slate-900: #111827;
    --bc-color-slate-950: #0b1020;
    --bc-color-blue-700: #003fbc;
    --bc-color-blue-800: #00338f;
    --bc-color-red-700: #ad000c;
    --bc-color-red-50: #fff0f1;
    --bc-color-blue-50: #edf4ff;
    --bc-color-green-700: #18794e;
    --bc-color-green-50: #edf8f2;
    --bc-color-amber-800: #805600;
    --bc-color-amber-50: #fff8e6;
    --bc-color-danger-700: #b42318;
    --bc-color-danger-50: #fff1f0;
    --bc-color-dark-surface: #111827;
    --bc-color-dark-raised: #172033;
    --bc-color-dark-muted: #c5cfdd;
    --bc-color-dark-border: #334155;
    --bc-color-dark-link: #8dbaff;
    --bc-color-overlay: rgb(0 7 28 / 72%);
    --bc-color-shadow-soft: rgb(0 19 71 / 10%);
    --bc-color-shadow-menu: rgb(0 19 71 / 16%);
    --bc-color-shadow-overlay: rgb(0 7 28 / 28%);
    --bc-color-transparent: transparent;

    /* Semantic colour roles */
    --bc-color-page: var(--bc-color-slate-50);
    --bc-color-surface: var(--bc-color-white);
    --bc-color-surface-muted: var(--bc-color-slate-100);
    --bc-color-surface-raised: var(--bc-color-white);
    --bc-color-surface-inverse: var(--bc-color-brand-navy);
    --bc-color-surface-inverse-muted: var(--bc-color-brand-ink);
    --bc-color-text: var(--bc-color-slate-900);
    --bc-color-text-strong: var(--bc-color-brand-ink);
    --bc-color-text-muted: var(--bc-color-slate-600);
    --bc-color-text-subtle: var(--bc-color-slate-500);
    --bc-color-text-inverse: var(--bc-color-brand-white);
    --bc-color-border: var(--bc-color-slate-200);
    --bc-color-border-strong: var(--bc-color-slate-300);
    --bc-color-border-inverse: rgb(253 253 253 / 22%);
    --bc-color-primary: var(--bc-color-brand-blue);
    --bc-color-primary-hover: var(--bc-color-blue-700);
    --bc-color-primary-active: var(--bc-color-blue-800);
    --bc-color-primary-soft: var(--bc-color-blue-50);
    --bc-color-accent: var(--bc-color-brand-red);
    --bc-color-accent-hover: var(--bc-color-red-700);
    --bc-color-accent-soft: var(--bc-color-red-50);
    --bc-color-breaking: var(--bc-color-brand-red);
    --bc-color-link: var(--bc-color-blue-700);
    --bc-color-link-hover: var(--bc-color-brand-red);
    --bc-color-focus: var(--bc-color-brand-sky);
    --bc-color-success: var(--bc-color-green-700);
    --bc-color-success-soft: var(--bc-color-green-50);
    --bc-color-warning: var(--bc-color-amber-800);
    --bc-color-warning-soft: var(--bc-color-amber-50);
    --bc-color-error: var(--bc-color-danger-700);
    --bc-color-error-soft: var(--bc-color-danger-50);
    --bc-color-info: var(--bc-color-brand-blue);
    --bc-color-info-soft: var(--bc-color-blue-50);
    --bc-color-disabled: var(--bc-color-slate-150);
    --bc-color-disabled-text: var(--bc-color-slate-500);
    --bc-color-logo-surface: var(--bc-color-brand-white);
    --bc-color-header-utility: var(--bc-color-brand-ink);
    --bc-color-header-nav: var(--bc-color-brand-navy);
    --bc-color-header-nav-hover: rgb(253 253 253 / 10%);
    --bc-color-header-nav-active: var(--bc-color-brand-red);
    --bc-color-footer: var(--bc-color-brand-navy);
    --bc-color-footer-surface: var(--bc-color-brand-ink);
    --bc-color-footer-text: var(--bc-color-brand-white);
    --bc-color-footer-muted: #c8d2e1;
    --bc-color-footer-border: rgb(253 253 253 / 20%);
    --bc-color-footer-link: var(--bc-color-brand-white);
    --bc-color-footer-link-hover: #b8d2ff;
    --bc-color-selection: #cfe0ff;
    --bc-color-selection-text: var(--bc-color-brand-ink);
    --bc-color-media-placeholder: var(--bc-color-slate-100);
    --bc-color-skeleton-start: var(--bc-color-slate-100);
    --bc-color-skeleton-middle: var(--bc-color-slate-150);
    --bc-color-skeleton-end: var(--bc-color-slate-100);
    --bc-gradient-media: linear-gradient(180deg, rgb(0 19 71 / 0%) 30%, rgb(0 19 71 / 88%) 100%);
    --bc-gradient-placeholder: linear-gradient(135deg, var(--bc-color-brand-ink), var(--bc-color-brand-blue));
    --bc-gradient-skeleton: linear-gradient(90deg, var(--bc-color-skeleton-start), var(--bc-color-skeleton-middle), var(--bc-color-skeleton-end));

    /* Typography */
    --bc-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bc-font-inter: "Inter", var(--bc-font-sans);
    --bc-font-editorial-serif: Georgia, Cambria, "Times New Roman", Times, serif;
    --bc-font-serif: var(--bc-font-inter);
    --bc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --bc-font-body: var(--bc-font-sans);
    --bc-font-heading: var(--bc-font-inter);
    --bc-weight-regular: 400;
    --bc-weight-medium: 500;
    --bc-weight-semibold: 600;
    --bc-weight-bold: 700;
    --bc-text-xs: 0.75rem;
    --bc-text-sm: 0.875rem;
    --bc-text-base: 1rem;
    --bc-text-md: 1.0625rem;
    --bc-text-lg: 1.125rem;
    --bc-text-xl: 1.25rem;
    --bc-text-2xl: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
    --bc-text-3xl: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
    --bc-text-4xl: clamp(2.125rem, 1.45rem + 2.2vw, 3.25rem);
    --bc-text-5xl: clamp(2.5rem, 1.55rem + 3.2vw, 4.25rem);
    --bc-text-article: clamp(1.0625rem, 1rem + 0.22vw, 1.125rem);
    --bc-leading-none: 1;
    --bc-leading-tight: 1.12;
    --bc-leading-heading: 1.2;
    --bc-leading-snug: 1.35;
    --bc-leading-body: 1.62;
    --bc-leading-article: 1.72;
    --bc-letter-tight: -0.018em;
    --bc-letter-normal: 0;
    --bc-letter-wide: 0.04em;
    --bc-letter-caps: 0.075em;
    --bc-measure-body: 68ch;
    --bc-measure-reading: 72ch;
    --bc-measure-compact: 48ch;

    /* Spacing scale: 4, 8, 12, 16, 24, 32, 40, 48, 64, 80 */
    --bc-space-0: 0;
    --bc-space-1: 0.25rem;
    --bc-space-2: 0.5rem;
    --bc-space-3: 0.75rem;
    --bc-space-4: 1rem;
    --bc-space-5: 1.25rem;
    --bc-space-6: 1.5rem;
    --bc-space-8: 2rem;
    --bc-space-10: 2.5rem;
    --bc-space-12: 3rem;
    --bc-space-16: 4rem;
    --bc-space-20: 5rem;
    --bc-section-space: clamp(var(--bc-space-8), 5vw, var(--bc-space-16));
    --bc-section-space-compact: clamp(var(--bc-space-6), 3.5vw, var(--bc-space-10));
    --bc-card-padding: clamp(var(--bc-space-4), 2vw, var(--bc-space-6));
    --bc-container-gutter: clamp(var(--bc-space-4), 3vw, var(--bc-space-8));
    --bc-grid-gap: clamp(var(--bc-space-4), 2.2vw, var(--bc-space-6));

    /* Layout and component sizing */
    --bc-container-max: 82.5rem;
    --bc-container-narrow: 62rem;
    --bc-container-reading: 45rem;
    --bc-container-sidebar: 20rem;
    --bc-size-touch: 2.75rem;
    --bc-size-icon: 1.25rem;
    --bc-size-logo-compact: 8.5rem;
    --bc-size-logo-mobile: 9.75rem;
    --bc-size-logo-desktop: 13.75rem;
    --bc-size-search: 32rem;
    --bc-size-dropdown: 18rem;
    --bc-size-mega: 52rem;
    --bc-size-drawer: 24rem;
    --bc-size-card-media-list: 12rem;
    --bc-size-back-to-top: 3rem;
    --bc-size-thumb-sm: 4.5rem;
    --bc-size-thumb-md: 6rem;
    --bc-size-thumb-lg: 7.5rem;
    --bc-size-control-sm: 2.25rem;
    --bc-size-control: 2.75rem;
    --bc-size-control-lg: 3.25rem;
    --bc-size-ad-banner: 5.625rem;
    --bc-size-ad-rectangle: 15.625rem;
    --bc-header-utility-height: 2rem;
    --bc-header-brand-height: 4.75rem;
    --bc-header-brand-height-mobile: 4rem;
    --bc-header-nav-height: 3rem;
    --bc-header-height: var(--bc-header-brand-height-mobile);
    --bc-header-sticky-offset: var(--bc-header-height);
    --bc-border-width: 1px;
    --bc-border-width-strong: 2px;
    --bc-focus-width: 3px;
    --bc-focus-offset: 3px;
    --bc-opacity-disabled: 0.56;
    --bc-opacity-muted: 0.72;

    /* Media */
    --bc-ratio-story: 16 / 9;
    --bc-ratio-feature: 3 / 2;
    --bc-ratio-horizontal: 4 / 3;
    --bc-ratio-square: 1;
    --bc-object-position: 50% 50%;

    /* Shape and elevation */
    --bc-radius-none: 0;
    --bc-radius-sm: 0.25rem;
    --bc-radius-md: 0.375rem;
    --bc-radius-lg: var(--bc-radius-md);
    --bc-radius-pill: 999rem;
    --bc-shadow-none: none;
    --bc-shadow-sm: 0 1px 2px var(--bc-color-shadow-soft);
    --bc-shadow-menu: 0 12px 32px var(--bc-color-shadow-menu);
    --bc-shadow-overlay: 0 24px 64px var(--bc-color-shadow-overlay);

    /* Motion */
    --bc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --bc-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
    --bc-transition-fast: 120ms var(--bc-ease-standard);
    --bc-transition-base: 180ms var(--bc-ease-standard);
    --bc-transition-slow: 240ms var(--bc-ease-emphasized);

    /* Layering */
    --bc-z-base: 1;
    --bc-z-sticky: 900;
    --bc-z-dropdown: 1000;
    --bc-z-overlay: 1100;
    --bc-z-dialog: 1200;
    --bc-z-toast: 1300;

    /* Legacy CanNews aliases retained during the v2 template migration */
    --theme-font-sans: var(--bc-font-sans);
    --theme-font-serif: var(--bc-font-serif);
    --theme-font-heading: var(--bc-font-heading);
    --theme-font-body: var(--bc-font-body);
    --theme-color-navy-950: var(--bc-color-brand-ink);
    --theme-color-navy-900: var(--bc-color-text);
    --theme-color-neutral-800: var(--bc-color-slate-800);
    --theme-color-navy-800: var(--bc-color-brand-navy);
    --theme-color-slate-700: var(--bc-color-slate-700);
    --theme-color-slate-600: var(--bc-color-text-muted);
    --theme-color-slate-500: var(--bc-color-text-subtle);
    --theme-color-slate-200: var(--bc-color-border);
    --theme-color-slate-100: var(--bc-color-surface-muted);
    --theme-color-slate-50: var(--bc-color-page);
    --theme-color-white: var(--bc-color-surface);
    --theme-color-red-700: var(--bc-color-accent-hover);
    --theme-color-red-600: var(--bc-color-accent);
    --theme-color-red-500: var(--bc-color-accent);
    --theme-color-red-50: var(--bc-color-accent-soft);
    --theme-color-blue-600: var(--bc-color-primary);
    --theme-color-blue-50: var(--bc-color-primary-soft);
    --theme-color-green-700: var(--bc-color-success);
    --theme-color-amber-500: var(--bc-color-warning);
    --theme-color-amber-800: var(--bc-color-warning);
    --theme-surface-page: var(--bc-color-page);
    --theme-surface-card: var(--bc-color-surface);
    --theme-surface-soft: var(--bc-color-surface-muted);
    --theme-text: var(--bc-color-text);
    --theme-text-strong: var(--bc-color-text-strong);
    --theme-text-muted: var(--bc-color-text-muted);
    --theme-border: var(--bc-color-border);
    --theme-accent: var(--bc-color-accent);
    --theme-accent-hover: var(--bc-color-accent-hover);
    --theme-radius-xs: var(--bc-radius-sm);
    --theme-radius-sm: var(--bc-radius-sm);
    --theme-radius-md: var(--bc-radius-md);
    --theme-radius-lg: var(--bc-radius-md);
    --theme-radius-xl: var(--bc-radius-md);
    --theme-radius-pill: var(--bc-radius-pill);
    --theme-shadow-xs: var(--bc-shadow-sm);
    --theme-shadow-sm: var(--bc-shadow-sm);
    --theme-shadow-md: var(--bc-shadow-menu);
    --theme-shadow-lg: var(--bc-shadow-overlay);
    --theme-container: var(--bc-container-max);
    --theme-container-readable: var(--bc-container-reading);
    --theme-space-1: var(--bc-space-1);
    --theme-space-2: var(--bc-space-2);
    --theme-space-3: var(--bc-space-3);
    --theme-space-4: var(--bc-space-4);
    --theme-space-5: var(--bc-space-5);
    --theme-space-6: var(--bc-space-6);
    --theme-space-8: var(--bc-space-8);
    --theme-space-10: var(--bc-space-10);
    --theme-space-12: var(--bc-space-12);
    --theme-transition: var(--bc-transition-base);
    --theme-focus-ring: var(--bc-focus-width) solid var(--bc-color-focus);
    --color-primary: var(--bc-color-brand-ink);
    --color-primary-soft: var(--bc-color-brand-navy);
    --color-accent: var(--bc-color-accent);
    --color-accent-dark: var(--bc-color-accent-hover);
    --color-accent-soft: var(--bc-color-accent-soft);
    --color-secondary: var(--bc-color-primary);
    --color-secondary-soft: var(--bc-color-primary-soft);
    --color-bg: var(--bc-color-page);
    --color-surface: var(--bc-color-surface);
    --color-surface-soft: var(--bc-color-surface-muted);
    --color-text: var(--bc-color-text);
    --color-text-muted: var(--bc-color-text-muted);
    --color-border: var(--bc-color-border);
    --color-success: var(--bc-color-success);
    --color-warning: var(--bc-color-warning);
    --black: var(--bc-color-text-strong);
    --black-2: var(--bc-color-brand-navy);
    --soft-black: var(--bc-color-slate-800);
    --red: var(--bc-color-accent);
    --red-dark: var(--bc-color-accent-hover);
    --light: var(--bc-color-page);
    --white: var(--bc-color-surface);
    --border: var(--bc-color-border);
    --text: var(--bc-color-text);
    --muted: var(--bc-color-text-muted);
    --radius: var(--bc-radius-md);
    --font-heading: var(--bc-font-heading);
    --font-body: var(--bc-font-body);
    --font-main: var(--bc-font-body);
    --cn-logo-navy: var(--bc-color-brand-navy);
    --cn-logo-red: var(--bc-color-brand-red);
    --cn-navy: var(--bc-color-brand-ink);
    --cn-navy-2: var(--bc-color-brand-navy);
    --cn-black: var(--bc-color-text-strong);
    --cn-soft-black: var(--bc-color-slate-800);
    --cn-red: var(--bc-color-accent);
    --cn-red-dark: var(--bc-color-accent-hover);
    --cn-ink: var(--bc-color-text);
    --cn-muted: var(--bc-color-text-muted);
    --cn-line: var(--bc-color-border);
    --cn-soft: var(--bc-color-page);
    --cn-soft-2: var(--bc-color-surface-muted);
    --cn-white: var(--bc-color-surface);
    --cn-bg: var(--bc-color-page);
    --cn-border: var(--bc-color-border);
    --cn-text: var(--bc-color-text);
    --cn-radius: var(--bc-radius-md);
    --cn-radius-sm: var(--bc-radius-sm);
    --cn-shadow: var(--bc-shadow-menu);
    --cn-shadow-sm: var(--bc-shadow-sm);
    --cn-shadow-soft: var(--bc-shadow-sm);
    --cn-container: var(--bc-container-max);
    --cn-container-max: var(--bc-container-max);
    --cn-header-height: var(--bc-header-brand-height-mobile);
    --cn-transition: var(--bc-transition-base);
    --cn-font-heading: var(--bc-font-heading);
    --cn-font-body: var(--bc-font-body);

    /* Bootstrap-compatible variables for legacy public markup */
    --bs-body-font-family: var(--bc-font-body);
    --bs-body-font-size: var(--bc-text-base);
    --bs-body-line-height: var(--bc-leading-body);
    --bs-body-color: var(--bc-color-text);
    --bs-body-color-rgb: 17, 24, 39;
    --bs-body-bg: var(--bc-color-page);
    --bs-body-bg-rgb: 246, 247, 249;
    --bs-emphasis-color: var(--bc-color-text-strong);
    --bs-secondary-color: var(--bc-color-text-muted);
    --bs-tertiary-color: var(--bc-color-text-subtle);
    --bs-secondary-bg: var(--bc-color-surface-muted);
    --bs-tertiary-bg: var(--bc-color-slate-25);
    --bs-primary: var(--bc-color-primary);
    --bs-primary-rgb: 0, 78, 220;
    --bs-secondary: var(--bc-color-text-muted);
    --bs-secondary-rgb: 71, 85, 105;
    --bs-success: var(--bc-color-success);
    --bs-warning: var(--bc-color-warning);
    --bs-danger: var(--bc-color-error);
    --bs-info: var(--bc-color-info);
    --bs-light: var(--bc-color-surface-muted);
    --bs-dark: var(--bc-color-text-strong);
    --bs-border-color: var(--bc-color-border);
    --bs-border-radius: var(--bc-radius-sm);
    --bs-border-radius-sm: var(--bc-radius-sm);
    --bs-border-radius-lg: var(--bc-radius-md);
    --bs-border-radius-pill: var(--bc-radius-pill);
    --bs-box-shadow: var(--bc-shadow-sm);
    --bs-box-shadow-sm: var(--bc-shadow-sm);
    --bs-box-shadow-lg: var(--bc-shadow-menu);
    --bs-link-color: var(--bc-color-link);
    --bs-link-hover-color: var(--bc-color-link-hover);
    --bs-focus-ring-color: var(--bc-color-focus);
}

:root[data-bs-theme="dark"] {
    color-scheme: dark;
    --bc-color-page: var(--bc-color-slate-950);
    --bc-color-surface: var(--bc-color-dark-surface);
    --bc-color-surface-muted: var(--bc-color-dark-raised);
    --bc-color-surface-raised: var(--bc-color-dark-raised);
    --bc-color-surface-inverse: var(--bc-color-brand-ink);
    --bc-color-surface-inverse-muted: var(--bc-color-brand-navy);
    --bc-color-text: #f1f5f9;
    --bc-color-text-strong: var(--bc-color-brand-white);
    --bc-color-text-muted: var(--bc-color-dark-muted);
    --bc-color-text-subtle: #9aabc0;
    --bc-color-border: var(--bc-color-dark-border);
    --bc-color-border-strong: #4b5e75;
    --bc-color-primary: #6ea5ff;
    --bc-color-primary-hover: #a8c9ff;
    --bc-color-primary-active: #c6dcff;
    --bc-color-primary-soft: #142b55;
    --bc-color-accent: #ff6671;
    --bc-color-accent-hover: #ff929a;
    --bc-color-accent-soft: #45151d;
    --bc-color-link: var(--bc-color-dark-link);
    --bc-color-link-hover: #c6dcff;
    --bc-color-success: #65c994;
    --bc-color-success-soft: #153b2b;
    --bc-color-warning: #f2c35e;
    --bc-color-warning-soft: #453716;
    --bc-color-error: #ff8b82;
    --bc-color-error-soft: #481c1a;
    --bc-color-info: #8dbaff;
    --bc-color-info-soft: #142b55;
    --bc-color-disabled: #263449;
    --bc-color-disabled-text: #94a3b8;
    --bc-color-selection: #294f87;
    --bc-color-selection-text: var(--bc-color-brand-white);
    --bc-color-media-placeholder: var(--bc-color-dark-raised);
    --bc-color-skeleton-start: var(--bc-color-dark-surface);
    --bc-color-skeleton-middle: var(--bc-color-dark-raised);
    --bc-color-skeleton-end: var(--bc-color-dark-surface);
    --bc-color-overlay: rgb(0 4 18 / 82%);
    --bc-color-shadow-soft: rgb(0 0 0 / 22%);
    --bc-color-shadow-menu: rgb(0 0 0 / 36%);
    --bc-color-shadow-overlay: rgb(0 0 0 / 48%);
    --bc-color-footer: #030c22;
    --bc-color-footer-surface: var(--bc-color-brand-ink);
    --bc-color-footer-muted: #c8d2e1;
    --bc-color-footer-link-hover: #b8d2ff;
    --bs-body-color-rgb: 241, 245, 249;
    --bs-body-bg-rgb: 11, 16, 32;
    --bs-primary-rgb: 110, 165, 255;
    --bs-secondary-rgb: 197, 207, 221;
}

@media (min-width: 768px) {
    :root {
        --bc-header-height: calc(var(--bc-header-brand-height) + var(--bc-header-nav-height));
    }
}

@media (min-width: 1200px) {
    :root {
        --bc-header-height: calc(var(--bc-header-brand-height) + var(--bc-header-nav-height));
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 20rem;
    background: var(--bc-color-page);
    color: var(--bc-color-text);
    font-family: var(--bc-font-body);
    font-size: 100%;
    line-height: var(--bc-leading-body);
    scroll-behavior: smooth;
    scroll-padding-top: var(--bc-header-sticky-offset);
    text-size-adjust: 100%;
}

body {
    min-width: 20rem;
    min-height: 100vh;
    margin: var(--bc-space-0);
    overflow-x: clip;
    background: var(--bc-color-page);
    color: var(--bc-color-text);
    font-family: var(--bc-font-body);
    font-size: var(--bc-text-base);
    font-weight: var(--bc-weight-regular);
    line-height: var(--bc-leading-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--bc-color-selection);
    color: var(--bc-color-selection-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block: var(--bc-space-0) var(--bc-space-4);
    color: var(--bc-color-text-strong);
    font-family: var(--bc-font-heading);
    font-weight: var(--bc-weight-semibold);
    letter-spacing: var(--bc-letter-tight);
    line-height: var(--bc-leading-heading);
    text-wrap: balance;
}

h1 { font-size: var(--bc-text-4xl); }
h2 { font-size: var(--bc-text-3xl); }
h3 { font-size: var(--bc-text-2xl); }
h4 { font-size: var(--bc-text-xl); }
h5 { font-size: var(--bc-text-lg); }
h6 { font-size: var(--bc-text-base); }

p,
blockquote,
figure,
dl,
dd {
    margin-block: var(--bc-space-0) var(--bc-space-4);
}

ul,
ol {
    margin-block: var(--bc-space-0) var(--bc-space-4);
    padding-inline-start: var(--bc-space-6);
}

li + li {
    margin-block-start: var(--bc-space-1);
}

a {
    color: var(--bc-color-link);
    text-decoration-color: var(--bc-color-transparent);
    text-decoration-thickness: var(--bc-border-width);
    text-underline-offset: var(--bc-space-1);
    transition: color var(--bc-transition-fast), text-decoration-color var(--bc-transition-fast);
}

a:hover {
    color: var(--bc-color-link-hover);
    text-decoration-color: currentColor;
}

strong,
b {
    font-weight: var(--bc-weight-bold);
}

small {
    font-size: var(--bc-text-sm);
}

hr {
    margin-block: var(--bc-space-8);
    border: var(--bc-space-0);
    border-block-start: var(--bc-border-width) solid var(--bc-color-border);
    opacity: 1;
}

img,
picture,
svg,
video,
canvas,
iframe {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

iframe {
    border: var(--bc-space-0);
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: var(--bc-space-0);
}

button,
input,
optgroup,
select,
textarea {
    margin: var(--bc-space-0);
    color: inherit;
    font: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
}

fieldset {
    min-width: var(--bc-space-0);
    margin: var(--bc-space-0);
    padding: var(--bc-space-0);
    border: var(--bc-space-0);
}

legend {
    padding: var(--bc-space-0);
}

[hidden],
[x-cloak] {
    display: none;
}

:target {
    scroll-margin-block-start: var(--bc-header-sticky-offset);
}

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

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

@media print {
    :root {
        color-scheme: light;
        --bc-color-page: var(--bc-color-white);
        --bc-color-surface: var(--bc-color-white);
        --bc-color-text: var(--bc-color-slate-900);
        --bc-color-text-strong: var(--bc-color-slate-900);
        --bc-color-text-muted: var(--bc-color-slate-600);
        --bc-color-border: var(--bc-color-slate-200);
    }

    html,
    body {
        min-width: var(--bc-space-0);
        background: var(--bc-color-page);
    }
}