/* SentraCheck shared chrome — Direction-B design system
 * Loads the new color palette + typography + top-strip + nav + footer + skip-link
 * Pages should link this AFTER their existing <style> block so it wins specificity ties.
 */


:root {
    /* New design tokens */
    --navy: #0B2545;
    --navy-deep: #081B33;
    --navy-darker: #06152B;
    --navy-line: #1A2C4A;
    --paper: #FAFBFD;
    --slate-50: #F4F6FB;
    --slate-100: #E6EAF2;
    --slate-200: #CFD6E4;
    --slate-300: #A6B0C5;
    --slate-400: #5E6B83;
    --slate-500: #3E4A66;
    --amber: #B85C00;
    --amber-dark: #8B4500;
    --amber-light: #F59E0B;
    --amber-bg: #FFF1DD;
    --teal: #0F6E6E;
    --teal-bg: #E6F2F2;
    --teal-light: #7BD0C9;
    --live-green: #5EE6A8;
    --red: #A8261A;
    --font-sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --font-serif: "Source Serif 4", Georgia, serif;

    /* Legacy aliases — map old --sc-* / Inter-era tokens onto the new palette
     * Existing inline section CSS that references these will pick up the new look. */
    --sc-navy: #0B2545;
    --sc-navy-deep: #081B33;
    --sc-offwhite: #FAFBFD;
    --sc-slate: #3E4A66;
    --sc-teal: #0F6E6E;
    --sc-teal-dark: #0A4F4F;
    --sc-teal-light: #4A9694;
    --sc-amber: #8B4500;
    --sc-text-dark: #0B2545;
    --sc-text-light: #FAFBFD;
    --bg-cream: #FAFBFD;
    --bg-cream-alt: #F4F6FB;
    --card-cream: #FFFFFF;
    --band-sage: #081B33;
    --olive: #0F6E6E;
    --olive-dark: #0A4F4F;
    --olive-light: #4A9694;
    --charcoal: #0B2545;
    --slate: #3E4A66;
    --taupe: #CFD6E4;
    --warning: #8B4500;
    --success: #0F6E6E;
    --accent-blue: #5A7A8C;
    --accent-rose: #A67B7B;
    --accent-amber: #8B4500;
}

/* Override base body font on every page that loads chrome.css */
html, body {
    margin: 0;
    padding: 0;
}
body {
    font-family: var(--font-sans) !important;
    background: var(--paper);
    color: var(--navy);
    -webkit-font-smoothing: antialiased;
}

/* ========== SKIP LINK ========== */
.sc-skip-link {
    position: absolute; top: -40px; left: 0;
    background: var(--navy); color: var(--paper);
    padding: 10px 16px; z-index: 9999;
    text-decoration: none; font-weight: 600;
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em;
}
.sc-skip-link:focus { top: 0; outline: 2px solid var(--amber-light); outline-offset: 2px; }
main:focus, #main:focus { outline: none; }

/* ========== ANIMATIONS ========== */
@keyframes scPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
    .sc-status-dot, .sc-pulse { animation: none !important; }
}

/* ========== TOP STRIP ========== */
.sc-top-strip {
    background: var(--navy); color: var(--slate-100);
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.06em;
    padding: 9px 56px;
    display: flex; justify-content: space-between; align-items: center;
}
.sc-top-strip-left { display: flex; align-items: center; gap: 10px; }
.sc-top-strip-right { display: flex; gap: 14px; }
.sc-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--live-green); box-shadow: 0 0 8px var(--live-green);
    animation: scPulse 2s ease-in-out infinite;
}

/* ========== NAV ========== */
.sc-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 56px;
    border-bottom: 1px solid var(--slate-200);
    background: var(--paper);
    position: sticky; top: 0; z-index: 100;
    font-family: var(--font-sans);
}
.sc-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.sc-brand-mark { display: grid; place-items: center; width: 28px; height: 28px; color: var(--navy); }
.sc-brand-name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--navy); line-height: 1; }
.sc-brand-tag { font-family: var(--font-mono); font-size: 11px; color: var(--slate-400); margin-top: 4px; }
.sc-nav-links { display: flex; gap: 24px; }
.sc-nav-link {
    color: var(--navy); text-decoration: none; font-size: 14px;
    display: inline-flex; align-items: baseline; gap: 6px; font-weight: 500;
    padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.sc-nav-link.active { border-bottom-color: var(--amber-dark); }
.sc-nav-link-idx { font-family: var(--font-mono); font-size: 10px; color: var(--slate-400); letter-spacing: 0.1em; }
.sc-nav-link:hover { color: var(--amber-dark); }
.sc-nav-cta { display: flex; gap: 16px; align-items: center; }
.sc-nav-secondary { color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 500; }
.sc-nav-secondary:hover { color: var(--amber-dark); }
.sc-nav-primary {
    background: var(--navy); color: var(--paper);
    padding: 11px 18px; text-decoration: none; font-size: 13px;
    display: inline-flex; align-items: center; gap: 10px; font-weight: 600;
    transition: background 0.15s;
}
.sc-nav-primary:hover { background: var(--navy-deep); }
.sc-nav-primary-arrow { font-family: var(--font-mono); font-size: 14px; }
.sc-mobile-menu-btn { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.sc-mobile-menu-btn span { width: 24px; height: 2px; background: var(--navy); transition: all 0.15s; }
.sc-mobile-menu {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--paper); padding: 80px 32px 32px;
    flex-direction: column; gap: 1.5rem; z-index: 200; overflow-y: auto;
}
.sc-mobile-menu.active { display: flex; }
.sc-mobile-menu a { color: var(--navy); text-decoration: none; font-size: 18px; font-weight: 500; }
.sc-mobile-menu-close {
    position: absolute; top: 20px; right: 32px;
    background: none; border: none; font-size: 24px; color: var(--navy); cursor: pointer;
}

/* ========== FOOTER ========== */
.sc-footer { background: var(--navy-deep); color: var(--slate-200); padding: 64px 56px 28px; font-family: var(--font-sans); }
.sc-footer-top {
    display: grid; grid-template-columns: 1.2fr 2.5fr; gap: 64px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--slate-500);
}
.sc-footer-brand .sc-brand-name { color: var(--slate-100); }
.sc-footer-brand .sc-brand-tag  { color: #9AA8C0; }
.sc-footer-brand .sc-brand-mark { color: var(--slate-100); }
.sc-footer-lede { font-size: 14px; line-height: 1.55; color: var(--slate-300); margin-top: 24px; max-width: 360px; text-wrap: pretty; }
.sc-footer-corp { font-family: var(--font-mono); font-size: 12px; color: var(--slate-300); line-height: 1.7; margin-top: 24px; }
.sc-footer-corp a { color: var(--slate-100); text-decoration: none; }
.sc-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sc-footer-col { display: flex; flex-direction: column; }
.sc-footer-col-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--slate-300); margin-bottom: 16px; }
.sc-footer-link { color: var(--slate-200); text-decoration: none; font-size: 14px; padding: 5px 0; }
.sc-footer-link:hover { color: var(--paper); }
.sc-footer-bottom {
    display: flex; gap: 12px; padding-top: 24px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.06em; color: var(--slate-300);
    flex-wrap: wrap;
}

/* ========== BREADCRUMB ========== */
.sc-breadcrumb {
    padding: 12px 56px;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--slate-400); letter-spacing: 0.08em;
    display: flex; gap: 10px; align-items: center;
    border-bottom: 1px solid var(--slate-200);
    background: var(--slate-50);
}
.sc-breadcrumb a { text-decoration: none; color: var(--slate-400); }
.sc-breadcrumb a:hover { color: var(--navy); }
.sc-crumb-slash { color: var(--slate-300); }
.sc-crumb-current { color: var(--navy); }

/* ========== RESPONSIVE ========== */
@media (max-width: 1100px) {
    .sc-top-strip, .sc-nav, .sc-breadcrumb, .sc-footer { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 1024px) {
    .sc-nav-links, .sc-nav-cta { display: none; }
    .sc-mobile-menu-btn { display: flex; }
}
@media (max-width: 720px) {
    .sc-top-strip, .sc-nav, .sc-breadcrumb, .sc-footer { padding-left: 24px; padding-right: 24px; }
    .sc-top-strip { flex-direction: column; gap: 6px; align-items: flex-start; }
    .sc-top-strip-right { flex-wrap: wrap; }
    .sc-footer-top { grid-template-columns: 1fr; gap: 32px; }
    .sc-footer-cols { grid-template-columns: 1fr 1fr; }
}