/* ═══════════════════════════════════════════════════════════════════
   BlueprintEngine — shared design layer (theme.css) · v2

   Loaded LAST in every page's <head>. Pages carry their own inline
   styles built on :root custom properties; this file re-maps those
   tokens onto ONE palette and enforces one design language across all
   seven pages: private-bank grade — layered graphite surfaces, soft
   radii, quiet elevation, Economiq gold reserved for meaning.

   NOTE: nav.js injects its own <style> AFTER this file, so nav items,
   header brand text and .btn-ghost are styled THERE — keep the two in
   agreement when changing either.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts, aliased under the family names the pages already
   reference ('Inter', 'Playfair Display') — zero per-page CSS edits needed.
   Replaces the Google Fonts CDN <link> (a render-blocking cross-origin fetch
   on every full-page load — the real cause of the static pages feeling
   slower/less consistent than the instant-loading React app, which already
   self-hosts). Playfair Display is aliased to Source Serif 4 — the same
   serif the React app uses for headings — so the two "feel" unified rather
   than using two different display serifs. ── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url('/fonts/source-serif-4-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url('/fonts/source-serif-4-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
    /* ── Navy-era tokens (index, leads, meeting-prep, tracker, compare) ── */
    --navy:        #0B0C10 !important;
    --navy-mid:    #12141B !important;
    --navy-light:  #1B1F29 !important;
    --navy-card:   #14171F !important;

    /* ── Dashboard/radar tokens — same surfaces ── */
    --bg:          #0B0C10 !important;
    --s1:          #12141B !important;
    --s2:          #1B1F29 !important;

    --gold:        #C9A84C !important;
    --gold-light:  #D8BC72 !important;

    /* Legibility: lift muted text */
    --text-muted:  rgba(255,255,255,0.52) !important;
    --muted:       rgba(237,235,230,0.52) !important;
    --faint:       rgba(237,235,230,0.34) !important;

    --border:      rgba(255,255,255,0.08) !important;
    --bdr:         rgba(255,255,255,0.08) !important;

    /* Radii scale */
    --r-lg: 16px;
    --r:    12px;
    --r-sm: 9px;

    /* Elevation */
    --shadow-card:  0 1px 2px rgba(0,0,0,0.35), 0 8px 24px -12px rgba(0,0,0,0.5);
    --shadow-float: 0 24px 64px -12px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── Base rendering ── */
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Quiet depth instead of dead-flat black */
body {
    background:
        radial-gradient(1100px 480px at 82% -8%, rgba(201,168,76,0.055), transparent 62%),
        radial-gradient(800px 420px at -6% 108%, rgba(120,140,190,0.035), transparent 58%),
        #0B0C10 !important;
}

::selection { background: rgba(201,168,76,0.32); color: #fff; }

/* ── Unified thin scrollbars ── */
* { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.28) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.22); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.4); }

/* ── Keyboard focus ── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible {
    outline: 2px solid rgba(201,168,76,0.55) !important;
    outline-offset: 1px;
    border-radius: var(--r-sm);
}

/* ═══ HEADER — one bar, everywhere, no drift ═══ */
.app-header, .header {
    /* exactly 62px — index/leads/meeting-prep size their content as calc(100vh - 62px) */
    height: 62px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: max(26px, env(safe-area-inset-left)) !important;
    padding-right: max(26px, env(safe-area-inset-right)) !important;
    background: rgba(18,20,27,0.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    position: sticky; top: 0; z-index: 300;
}
.logo-mark {
    width: 32px !important; height: 32px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(201,168,76,0.3) !important;
    background: linear-gradient(145deg, rgba(201,168,76,0.16), rgba(201,168,76,0.05)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.header-brand { gap: 12px !important; }
.brand-text-title { font-size: 15px !important; }
.brand-text-sub  { font-size: 8.5px !important; }

/* ═══ CONTROLS ═══ */
button { border-radius: var(--r-sm); }
button:active { transform: translateY(1px); }
button, a { transition-timing-function: ease-out; }

/* Page-level gold + ghost buttons (header ones are re-styled in nav.js) */
.btn-gold, .btn-add-lead {
    border-radius: 999px !important;
    padding: 7px 16px !important;
}

input[type="text"], input[type="date"], input[type="email"], input[type="number"],
input[type="password"], input[type="search"], select, textarea {
    border-radius: var(--r-sm) !important;
    accent-color: #C9A84C;
    caret-color: #C9A84C;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.3); }

/* Pills, chips, badges → fully rounded */
.pill, .rules-chip, .alert-chip, .app-badge, .col-type-badge, .best-label,
.badge-recommended, .be-pr-badge, .stress-tag,
[class*="chip"], [class*="badge"] {
    border-radius: 999px !important;
}

/* ═══ CARDS & SURFACES ═══ */

/* Generic catch: anything named like a card/panel/modal/box gets soft corners */
[class*="card"], [class*="panel"], [class*="modal"], [class*="-box"],
.callout, #briefBox {
    border-radius: var(--r);
}
.stat-box, .app-card, .scenario-card, .reg-card, .callout, #briefBox {
    background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent 40%), var(--navy-card) !important;
    box-shadow: var(--shadow-card);
}
#briefBox { border-radius: var(--r-lg); box-shadow: var(--shadow-float); }

/* Dashboard + Radar stat strips → elevated stat cards */
.stats-strip {
    gap: 12px !important;
    border-bottom: none !important;
    padding: 26px 0 4px;
    flex-wrap: wrap;
}
.stats-strip .stat-cell {
    background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent 45%), var(--s1);
    border: 1px solid var(--bdr) !important;
    border-radius: var(--r);
    padding: 20px 22px !important;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.stats-strip .stat-cell:first-child { padding-left: 22px !important; }
.stats-strip .stat-cell .stat-n { font-size: 32px; }
.stat-cell.is-warn::before, .stat-cell.is-alert::before, .stat-cell.is-good::before { height: 3px; }

/* Dashboard quick actions → chip toolbar */
.action-bar { gap: 10px !important; border-bottom: none !important; padding: 16px 0 22px; flex-wrap: wrap; }
.action-bar .action-link,
.action-bar .action-link:last-child {
    border: 1px solid var(--bdr);
    border-radius: 999px;
    padding: 9px 17px;
    background: var(--s1);
}
.action-bar .action-link:hover { border-color: rgba(201,168,76,0.35); background: var(--s2); color: #fff; }

/* Pipeline funnel steps */
.funnel { gap: 8px !important; }
.funnel-step { border: 1px solid var(--bdr); border-radius: var(--r-sm); background: var(--s1) !important; }
.funnel-step:hover { border-color: rgba(201,168,76,0.3); }

/* Radar rules registry: real gaps, elevated cards */
.reg-grid { gap: 12px !important; background: transparent !important; border: none !important; }
.reg-card { border: 1px solid var(--bdr); border-radius: var(--r); }

/* Radar urgency bars */
.ubar { border-radius: 999px; overflow: hidden; }

/* Side drawers float on rounded left edge */
.drawer {
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    box-shadow: var(--shadow-float);
    border-left: 1px solid rgba(255,255,255,0.09) !important;
}

/* Compare: table lives in a rounded, contained surface */
.compare-wrap {
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    background: rgba(255,255,255,0.012);
    padding: 4px 10px 0;
}
.compare-table tr:last-child td { border-bottom: none; }

/* Timeline band (radar drawer) */
.tl-band { border-radius: 999px; overflow: hidden; }

/* Tabular figures for all stat numerals */
.stat-val, .stat-n, .funnel-n { font-variant-numeric: tabular-nums; }

/* ── Print: chrome never appears on client-facing output ── */
@media print {
    .app-header, .header, #nav-root, #be-palette-overlay { display: none !important; }
    html, body { background: #fff !important; }
}

/* ── Respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT re-skin (opt-in via <body class="lit">) — brings the static
   document pages onto the same paper-forward system as the React app.
   Strategy: keep --navy as INK (it's already a dark navy), flip the SURFACE
   tokens to paper/white, flip text tokens to ink, and neutralise the
   hardcoded white rgba() borders/rows. The header stays navy to match the app.
   ═══════════════════════════════════════════════════════════════════════ */
body.lit {
    /* Surfaces → light (these tokens are only ever used as backgrounds) */
    --navy-mid:   #FFFFFF !important;
    --navy-card:  #FFFFFF !important;
    --navy-light: #F6F5F1 !important;
    --s1:         #FFFFFF !important;
    --s2:         #F6F5F1 !important;
    /* Text → ink */
    --text:       #16223A !important;
    --text-h:     #16223A !important;
    --white:      #16223A !important;
    --white-dim:  rgba(22,34,58,0.86) !important;
    --text-muted: rgba(22,34,58,0.52) !important;
    --muted:      rgba(22,34,58,0.52) !important;
    --faint:      rgba(22,34,58,0.38) !important;
    /* Hairlines → dark, gold accents softened for a light ground */
    --border:      rgba(22,34,58,0.10) !important;
    --bdr:         rgba(22,34,58,0.10) !important;
    --gold-dim:    rgba(201,168,76,0.12) !important;
    --gold-border: rgba(201,168,76,0.40) !important;

    background:
        radial-gradient(1200px 520px at 88% -10%, rgba(201,168,76,0.05), transparent 60%),
        radial-gradient(760px 420px at -6% 106%, rgba(22,34,58,0.03), transparent 58%),
        #F6F5F1 !important;
    color: #16223A !important;
}
/* Serif headings on the doc pages read as document voice */
body.lit .page-title, body.lit .col-country, body.lit .scenario-title,
body.lit .callout-title { color: #16223A !important; }

/* Header stays navy; keep its text/controls light on the dark bar */
body.lit .app-header, body.lit .header { background: #16223A !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
body.lit .app-header .btn-ghost, body.lit .header .btn-ghost { color: rgba(255,255,255,0.72) !important; border-color: rgba(255,255,255,0.16) !important; }
body.lit .header .tool-nav { border-color: rgba(255,255,255,0.14) !important; }
body.lit .header .tool-nav-item { color: rgba(255,255,255,0.58) !important; border-right-color: rgba(255,255,255,0.12) !important; }
body.lit .header .tool-nav-item:hover { color: var(--gold-light) !important; background: rgba(201,168,76,0.16) !important; }
body.lit .header .brand-text-sub { color: rgba(201,168,76,0.55) !important; }

/* Gold used as TEXT needs to darken on a light ground (contrast) */
body.lit .filter-tab.active { color: #8A6A2E !important; background: rgba(201,168,76,0.14) !important; }
body.lit .best-label, body.lit .scenario-label, body.lit .scenario-why strong,
body.lit .callout-title, body.lit .callout-body strong, body.lit .cell-val.win,
body.lit .crit-name.win { color: #8A6A2E !important; }

/* Neutralise hardcoded white rgba() separators, zebra rows and hovers */
body.lit .compare-table td + td,
body.lit .col-header + .col-header { border-left-color: rgba(22,34,58,0.06) !important; }
body.lit .compare-table tr:nth-child(even) td { background: rgba(22,34,58,0.02) !important; }
body.lit .compare-table td.malta-col,
body.lit .col-header.malta-col { background: rgba(201,168,76,0.06) !important; }
body.lit .compare-table tr:nth-child(even) td.malta-col { background: rgba(201,168,76,0.09) !important; }
body.lit .filter-tab:hover { color: #16223A !important; background: rgba(22,34,58,0.04) !important; }
body.lit .btn-ghost:hover { color: #16223A !important; border-color: rgba(22,34,58,0.22) !important; }
body.lit .dot-grey { background: rgba(22,34,58,0.22) !important; }
body.lit .scenario-why { background: rgba(201,168,76,0.10) !important; }

/* Cards / callouts → white document surfaces with soft elevation */
body.lit .scenario-card, body.lit .callout, body.lit .stat-box,
body.lit .app-card, body.lit .reg-card, body.lit #briefBox {
    background: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(22,34,58,0.05), 0 8px 24px -16px rgba(22,34,58,0.12) !important;
}

/* nav.js's mobile menu (#be-mobile-menu) now bakes in the light,
   React-Sheet-matching styling directly as its default — no per-page
   overrides needed here any more. Keep this file's job scoped to the
   Form/Preview workbench toggle below, which still needs a light variant. */

/* Same gap as #be-mobile-menu above, for the mobile Form/Preview workbench
   toggle bar (Blueprint, Meeting Prep) — also hardcoded dark in nav.js with
   no light counterpart. */
body.lit #be-wb-toggle {
    background: #F6F5F1 !important;
    border-bottom-color: rgba(22,34,58,0.10) !important;
}
body.lit #be-wb-toggle .be-wb-btn {
    background: #FFFFFF !important;
    border-color: rgba(22,34,58,0.12) !important;
    color: rgba(22,34,58,0.58) !important;
}
body.lit #be-wb-toggle .be-wb-btn.active {
    color: #8A6A2E !important;
    background: rgba(201,168,76,0.14) !important;
    border-color: rgba(201,168,76,0.35) !important;
}
