/* ══════════════════════════════════════════════════════════════════════════
   SILO BUSINESS SERVICES — shared design system
   ──────────────────────────────────────────────────────────────────────────
   Single source of truth for brand tokens, the contrast-safe "ink" layer,
   focus visibility and motion safety.

   This sheet is linked from every page *before* that page's own <style>, so
   page-level layout rules still win. Only things that must be identical
   everywhere (tokens, skip link, nav CTA, focus rings, reduced motion) and the
   surface-aware link ink live here.

   Before this file the brand tokens were copy-pasted into all ten pages and had
   drifted (--accent-light was #6ba3d0 on one page, #6AAFD8 on the other nine;
   --border and --success differed on three more).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand ─────────────────────────────────────────────────────────── */
    --navy:        #152339;
    --navy-mid:    #1e3054;
    --navy-light:  #2a4270;
    --navy-lighter:#111d32;
    --silver:      #C8D4E0;
    --silver-dim:  #8FA3B8;
    --silver-dark: #8FA3B8;   /* book-call's alias for --silver-dim */
    --white:       #F8FAFC;
    --off-white:   #EEF2F7;
    --accent:      #4A90C4;
    --accent-light:#6AAFD8;
    --accent-glow: rgba(74,144,196,0.4);
    --text-body:   #3A5068;

    /* Muted text for LIGHT backgrounds. --silver-dim is tuned for navy
       surfaces; on --white / --off-white it only reaches ~2.3:1, so small print
       inside cards and the footer uses this instead (~5:1). */
    --text-muted:  #5A6E86;

    --border:      rgba(200,212,224,0.18);
    --border-mid:  rgba(200,212,224,0.30);
    --success:     #2D5A3D;
    --warning:     #D69E2E;
    --error:       #E53E3E;

    --font-head:   'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-display:'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body:   'Barlow', 'Helvetica Neue', Arial, sans-serif;

    /* ── Contrast-safe ink ───────────────────────────────────────────────
       --accent (#4A90C4) and --silver-dim (#8FA3B8) are authored for NAVY
       surfaces. Used as *text* on the light surfaces, or as a *solid fill*
       carrying white text, they fall to 2.3–3.4:1 — well under the 4.5:1 AA
       floor. These are the verified replacements; the ratio against the
       surface each is used on is noted so the choice stays auditable.        */

    /* as text on light 4.86 (#EEF2F7) / 5.22 (#F8FAFC) / 4.60 (#E3EDF5)
       as a fill under #F8FAFC text 5.22 */
    --accent-deep:    #2F6E9E;
    /* as text on raised navy panels: 5.07 (#283F65) … 7.58 (#152339) */
    --accent-on-dark: #7CBBE4;
    /* muted text on raised navy panels: 5.31 (#283F65) … 7.94 (#152339) */
    --on-dark-muted:  #A8BACD;

    /* Surface-resolved link ink. Light is the default; the dark containers
       below flip it, so one `a:not([class])` rule resolves correctly on both. */
    --ink-accent: var(--accent-deep);

    /* The same trick for the components that appear on BOTH surfaces. Each has
       its light-surface value here and is re-declared inside the dark-container
       list below, so the component rule is written once and lands correctly
       either way — rather than every page enumerating `.hero`, `#faq`,
       `.spotlight-section`, … and getting the list slightly wrong. */
    --label-ink:    var(--accent-deep);            /* .section-label */
    --ghost-ink:    var(--text-muted);             /* .btn-ghost text */
    --ghost-border: rgba(58,80,104,0.30);          /* .btn-ghost outline */
    --muted-ink:    var(--text-muted);             /* small print */

    /* ── Scales ─────────────────────────────────────────────────────────
       Referenced by new work; existing rules keep their literal values so
       nothing moves.                                                          */
    --fs-xs: 0.75rem;  --fs-sm: 0.85rem;  --fs-base: 1.1rem;
    --fs-lg: 1.35rem;  --fs-xl: 1.9rem;   --fs-2xl: 2.6rem;  --fs-3xl: 3.4rem;
    --space-1: 0.35rem; --space-2: 0.7rem;  --space-3: 1.1rem; --space-4: 1.6rem;
    --space-5: 2.4rem;  --space-6: 3.5rem;  --space-7: 5rem;
    --radius-sm: 2px;   --radius: 6px;      --radius-lg: 14px;
    --radius-pill: 999px;
    --dur-fast: 150ms;  --dur: 250ms;       --dur-slow: 500ms;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --z-nav: 100;       --z-progress: 200;  --z-modal: 400;  --z-toast: 500;
}

/* Dark containers that are dark on EVERY page they appear on. Re-declaring the
   ink here means a component rule written once (e.g. a footnote colour) lands
   on the right value on either surface.
   The list was built by probing each page's rendered backgrounds, not inferred
   from class names — `.section-mid` and `#different` are navy sections that
   carry no `.section-dark`.
   `.spotlight-section`, `#faq` and `footer` are deliberately NOT here: index's
   `#faq` and `.spotlight-section` are navy while build-your-plan's are light,
   and build-your-plan's footer is light while the other nine pages' are navy.
   A class whose surface flips between pages is not a shared token, so those
   flips live in the page that owns the background rule, in a block marked
   "Dark surface(s) that only this page has". */
.hero,
.section-dark,
.section-mid,
#different,
.cta-section,
.decision-section,
.legal-header,
.completion-banner {
    --ink-accent:   var(--accent-on-dark);
    --label-ink:    var(--accent);
    --ghost-ink:    var(--silver-dim);
    --ghost-border: rgba(200,212,224,0.25);
    --muted-ink:    var(--on-dark-muted);
}

/* ── Links ──────────────────────────────────────────────────────────────
   Plain anchors (no class of their own) inherit the surface-appropriate ink.
   Higher specificity than the per-page `a { color: var(--accent) }`, so it
   wins regardless of stylesheet order. Anchors that carry a class — buttons,
   nav items, footer microlinks — are untouched by this. */
a:not([class]) { color: var(--ink-accent); }

/* ── Skip link ──────────────────────────────────────────────────────────
   Shared by all ten pages. The fill was --accent, which put #F8FAFC text on
   #4A90C4 at 3.30:1; --accent-deep is 5.22:1. */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent-deep);
    color: var(--white);
    padding: 8px;
    z-index: 1000;
    text-decoration: none;
}
.skip-link:focus { top: 0; outline: 3px solid var(--accent-on-dark); outline-offset: 2px; }

/* ── Nav CTA ────────────────────────────────────────────────────────────
   Shared by all ten pages. Same white-on-accent problem as the skip link;
   the hover state went to --accent-light (#6AAFD8), which is *worse* at
   2.23:1 with white text, so hover now deepens instead of lightening. */
.nav-cta {
    background: var(--accent-deep);
    color: var(--white) !important;
    padding: 0.5rem 1.25rem;
    border-radius: 2px;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    transition: background 0.2s !important;
}
.nav-cta:hover { background: #1F5C8A !important; color: var(--white) !important; } /* 6.79:1 */

/* ── Focus visibility ───────────────────────────────────────────────────
   Every page except client-intake had no visible focus ring; several killed
   the outline outright. #4A90C4 clears 3:1 (WCAG 1.4.11) against both the
   light page surfaces (~3.4:1) and navy (~4.4:1), and the 2px offset keeps
   the ring off the element's own fill. */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}
/* Windows High Contrast / forced-colors: let the OS draw the ring. */
@media (forced-colors: active) {
    :focus-visible { outline: 3px solid CanvasText; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────
   Only build-your-plan and index had partial handling; why-silo, esign and
   the legal pages had none. Beyond stopping the animation, this pins the
   reveal utilities to their *finished* state — without it a reader who has
   reduced motion on can be left looking at an element that animates in from
   opacity:0 and never arrives. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .fade-up,
    .fade-in,
    .fade-in-section,
    .reveal,
    .stagger-children > * {
        opacity: 1 !important;
        transform: none !important;
    }
}