/* Shared SystemicLogic CI foundations. Inter headings, Assistant copy. */
:root {
    color-scheme: light;
    scroll-behavior: auto;
    --header-height: max(64px, 8vh);
    --site-wide: 1680px;
    --site-content: 1440px;
    --site-gutter: clamp(20px, 6vw, 96px);
    --section-space: clamp(36px, 5vw, 72px);
    --card-radius: 8px;
    --footer-stripe-height: clamp(4px, .42vw, 6px);
    --paper-sl: var(--sl-white);
    --paper-raised-sl: var(--sl-white);
    --ink-sl: var(--sl-black);
    --ink-muted-sl: color-mix(in srgb, var(--sl-black) 72%, var(--sl-white));
    --border-sl: color-mix(in srgb, var(--sl-black) 17%, var(--sl-white));
    --link-sl: var(--sl-master-light-ink);
}
html[data-theme="dark"] {
    color-scheme: dark;
    --paper-sl: var(--sl-black);
    --paper-raised-sl: color-mix(in srgb, var(--sl-black) 96%, var(--sl-white));
    --ink-sl: var(--sl-white);
    --ink-muted-sl: color-mix(in srgb, var(--sl-white) 76%, var(--sl-black));
    --border-sl: color-mix(in srgb, var(--sl-white) 23%, var(--sl-black));
    --link-sl: var(--sl-master-dark-ink);
}
/* Compatibility aliases all resolve to the same official palette, including legacy pages. */
:root, html[data-theme="dark"] {
    --background-color: var(--paper-sl);
    --text-color: var(--ink-sl);
    --text-color-light: var(--ink-sl);
    --text-color-dark: var(--ink-sl);
    --ink-dark-sl: var(--sl-black);
    --bs-body-bg: var(--paper-sl);
    --bs-body-color: var(--ink-sl);
    --bs-border-color: var(--border-sl);
    --bs-primary: var(--link-sl);
    --bs-link-color: var(--link-sl);
    --bs-link-hover-color: var(--link-sl);
    --primary-sl: var(--sl-blue);
    --secondary-sl: var(--sl-orange);
    --info-sl: var(--sl-blue);
    --success-sl: var(--sl-forest-green);
    --warning-sl: var(--sl-yellow);
    --error-sl: var(--sl-red-ink);
    --black1-sl: var(--sl-black);
    --black2-sl: var(--sl-black);
    --black3-sl: color-mix(in srgb, var(--sl-black) 94%, var(--sl-white));
    --white-sl: var(--sl-white);
    --gray1-sl: color-mix(in srgb, var(--sl-black) 92%, var(--sl-white));
    --gray2-sl: color-mix(in srgb, var(--sl-black) 80%, var(--sl-white));
    --gray3-sl: color-mix(in srgb, var(--sl-black) 57%, var(--sl-white));
    --gray4-sl: color-mix(in srgb, var(--sl-black) 30%, var(--sl-white));
    --gray5-sl: color-mix(in srgb, var(--sl-black) 14%, var(--sl-white));
    --deco1-sl: var(--sl-maroon);
    --deco2-sl: var(--sl-purple);
    --deco3-sl: var(--sl-dark-green);
    --deco4-sl: var(--sl-light-green);
    --deco5-sl: color-mix(in srgb, var(--sl-purple) 6%, var(--paper-sl));
    --lightbg-sl: color-mix(in srgb, var(--sl-purple) 10%, var(--paper-sl));
    --card-grey: var(--paper-raised-sl);
    --section-purple: color-mix(in srgb, var(--sl-purple) 4%, var(--paper-sl));
    --circle-diameter: 230px;
    --color-orange: var(--sl-orange);
    --color-red: var(--sl-red);
    --color-blue: var(--sl-blue);
    --color-green: var(--sl-forest-green);
    --color-army-green: var(--sl-dark-green);
    --color-light-green: var(--sl-light-green);
    --color-dark-green: var(--sl-forest-green);
    --color-purple: var(--sl-maroon);
    --color-vibrant-purple: var(--sl-purple);
    --color-yellow: var(--sl-yellow);
    --topbar-bg: var(--paper-sl);
    --topbar-border: var(--border-sl);
    --input-bg: var(--paper-raised-sl);
    --input-text: var(--ink-sl);
    --input-border: var(--border-sl);
    --primary-color: var(--link-sl);
    --table-bg: var(--paper-sl);
    --table-header-bg: var(--paper-raised-sl);
    --table-border: var(--border-sl);
}

html { scroll-padding-top: calc(var(--header-height) + 20px); }
body { min-width: 320px; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-inter); }
button, input, select, textarea { font-family: var(--font-regular); }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--link-sl); outline-offset: 4px; }
/* The router focuses the page title for navigation announcements, not interaction. */
h1[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { :root[data-in-page-scroll] { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Keep the no-script layout out of HTML that enhanced navigation reparses. */
@media (scripting: none) and (max-width: 1199px) {
    .primry-header[data-site-header] { position: relative; height: auto; }
    .primry-header .header-inner { display: block; padding-block: 16px; }
    .primry-header .site-navigation { display: block; position: static; width: 100%; max-height: none; border: 0; box-shadow: none; }
    .primry-header .capabilities-menu[hidden] { display: block !important; }
    .primry-header .header-actions, .primry-header .submenu-toggle { display: none; }
    .bird-hero[data-artwork] { margin-top: 0; }
}

/* Keep Bootstrap's utility/action colours within the same palette without editing vendor code. */
a { color: var(--link-sl); }
.text-primary, .text-info { color: var(--sl-blue-ink) !important; }
.text-success { color: var(--sl-forest-green-ink) !important; }
.text-danger, .validation-message { color: var(--sl-red-ink) !important; }
.text-warning { color: var(--sl-yellow-ink) !important; }
.text-secondary, .text-muted { color: var(--ink-muted-sl) !important; }
.bg-primary { background-color: var(--sl-blue) !important; }
.bg-success { background-color: var(--sl-forest-green) !important; }
.bg-danger { background-color: var(--sl-red) !important; }
.bg-warning { background-color: var(--sl-yellow) !important; }
.btn-primary {
    --bs-btn-bg: var(--link-sl); --bs-btn-border-color: var(--link-sl); --bs-btn-color: var(--paper-sl);
    --bs-btn-hover-bg: var(--link-sl); --bs-btn-hover-border-color: var(--link-sl); --bs-btn-hover-color: var(--paper-sl);
    --bs-btn-active-bg: var(--link-sl); --bs-btn-active-border-color: var(--link-sl); --bs-btn-active-color: var(--paper-sl);
    --bs-btn-disabled-bg: var(--link-sl); --bs-btn-disabled-border-color: var(--link-sl);
}

/* A short paint transition avoids exposing an empty hero during enhanced navigation. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; }
::view-transition-group(root) { animation-duration: 120ms; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(root) { animation: none; }
}