/* ===================================================================
   WCI design tokens (WISEcode Intelligence design system)
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo:
     /Users/kevinjones/src/wc/ip-b2b/pages/wise.css
       lines   1-56   'WISE Digits' @font-face blocks (DM Mono digits)
       lines 148-270  :root light tokens
       lines 272-279  html.sans-headlines (serif headlines off)
       lines 281-339  html.dark overrides
   Re-sync: re-copy those ranges and re-apply ONLY the selector swap below.

   SELECTOR SWAP (the one deliberate deviation from the source):
     :root                      -> .wci
     html.dark                  -> html.dark .wci
     html.sans-headlines (body) -> html.sans-headlines .wci
   Why: the app already bridges several of these same token names
   (--surface, --border, --text, --primary, --shadow-1, --r-*, ...) onto its
   own palette inside class-scoped blocks (.bi in brand-intelligence.css and
   .vf-pay in verification-payment.css). Scoping the WCI block under .wci
   (placed on <body> in Components/App.razor) keeps it app-wide by
   inheritance while never redefining anything at :root. Inside .bi /
   .vf-pay the legacy bridge values still win on their own subtree; migrate
   those bridges onto these tokens when those pages are re-ported.

   The app has no dark mode yet; the html.dark block is inert until a theme
   toggle adds the class to <html>.
   =================================================================== */

/* ── App-wide mono numerals ──────────────────────────────────────────────
   'WISE Digits' is a synthetic digit-only family (unicode-range U+0030-39)
  backed by DM Mono. It is prepended to every font stack in the app so that
  every numeral renders in mono while letters fall through to the normal face. */
@font-face {
  font-family: 'WISE Digits';
  font-style: normal;
  src: url('https://fonts.gstatic.com/s/dmmono/v16/aFTR7PB1QTsUX8KYvrGyEYOtbQ.woff2') format('woff2');
  unicode-range: U+0030-0039;
  font-weight: 100 450;
}
@font-face {
  font-family: 'WISE Digits';
  font-style: normal;
  src: url('https://fonts.gstatic.com/s/dmmono/v16/aFTU7PB1QTsUX8KYthqQBA.woff2') format('woff2');
  unicode-range: U+0030-0039;
  font-weight: 451 570;
}
@font-face {
  font-family: 'WISE Digits';
  font-style: normal;
  src: url('https://fonts.gstatic.com/s/dmmono/v16/aFTR7PB1QTsUX8KYvumzEYOtbQ.woff2') format('woff2');
  unicode-range: U+0030-0039;
  font-weight: 571 650;
}
@font-face {
  font-family: 'WISE Digits';
  font-style: normal;
  src: url('https://fonts.gstatic.com/s/dmmono/v16/aFTR7PB1QTsUX8KYvumzEYOtbQ.woff2') format('woff2');
  unicode-range: U+0030-0039;
  font-weight: 651 900;
}
/* Italic twins — same mono files. Without a declared italic face, a
   unicode-range miss on a letter can fall through to italic DM Sans and
   slant the whole page while font-style stays "normal". */
@font-face {
  font-family: 'WISE Digits';
  font-style: italic;
  src: url('https://fonts.gstatic.com/s/dmmono/v16/aFTR7PB1QTsUX8KYvrGyEYOtbQ.woff2') format('woff2');
  unicode-range: U+0030-0039;
  font-weight: 100 450;
}
@font-face {
  font-family: 'WISE Digits';
  font-style: italic;
  src: url('https://fonts.gstatic.com/s/dmmono/v16/aFTU7PB1QTsUX8KYthqQBA.woff2') format('woff2');
  unicode-range: U+0030-0039;
  font-weight: 451 570;
}
@font-face {
  font-family: 'WISE Digits';
  font-style: italic;
  src: url('https://fonts.gstatic.com/s/dmmono/v16/aFTR7PB1QTsUX8KYvumzEYOtbQ.woff2') format('woff2');
  unicode-range: U+0030-0039;
  font-weight: 571 900;
}

/* ---- Light tokens (wise.css 148-270) ---- */
.wci {
  --bg: #F9F8F3;
  --surface: #FFFFFF;
  --surface-2: #F4F2EA;
  --surface-3: #EFEDE2;
  /* The two deep steps of the Linen ramp. Brand values, identical in both
     themes. Gilded Grain is the stroke on every output chip in the chat and
     the fill of the output ear marks on the activity rail.
     (wise.css 163-170 in the 2026-09-23 revision a2ba5dc; added for the
     Output chips port, INTEL-367.) */
  --warm-300: #B69252;
  --warm-400: #946005;
  /* Semantic hooks so the ear marks and the output stroke can be retuned in one
     place (and per theme) without touching the ramp itself. */
  --act-output: var(--warm-400);
  --out-stroke: var(--warm-400);
  /* The blue the streaming-trace helix is drawn in; the in-progress ring around
     the owl on a thinking transcript line reads it. (wise.css 192-196 in the
     revision served 2026-09-28; added for the Transcript lines port, INTEL-372.) */
  --helix-ink: #25507C;
  /* The chat module's popover shadow, the fallback the transcript action row's
     reason picker and More menu read. wise.css sets it on .sc-card (8003) rather
     than :root; the app has no .sc-card, so it lives here (INTEL-405). */
  --sc-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.45);
  --text: #111827;
  /* Quiet gray darkened to clear WCAG 1.4.3/1.4.6 AAA (7:1) on every light
     surface it appears on (down to surface-3 #EFEDE2). Subtle is the same ink. */
  --text-muted: #444B55;
  --text-subtle: var(--text-muted);
  /* Brand-blue borders — tinted from --primary (#25507C) instead of neutral
     ink so every card, divider, input and SVG stroke reads on-brand. */
  --border: color-mix(in srgb, var(--primary) 16%, transparent);
  --border-strong: color-mix(in srgb, var(--primary) 28%, transparent);

  /* Deepened from #25507C so primary works as AAA text (7:1 on bg) AND as a
     button fill (white-on-primary clears 7:1). rgb(37, 80, 124). */
  --primary: #25507C;
  /* Foreground-only alias: brand blue in light mode, flipped to white in dark
     mode where #25507C text/icons are nearly invisible on navy. Use for any
     headline, icon or label colored with the brand blue; never for fills. */
  --primary-ink: var(--primary);
  --primary-10: rgba(37, 80, 124, 0.10);
  --primary-20: rgba(37, 80, 124, 0.20);
  --primary-soft: rgba(37, 80, 124, 0.08);
  --sec-green: #32A966;
  --sec-red: #DC3038;
  --ter-amber: #FFC434;
  --ter-violet: #25507C;
  --ter-cyan: #25507C;

  /* Chart-status scale — five semantic stops (best → worst). Every chart fill
     (donut slice, bar, gauge, radar vertex) uses these so a score’s color is
     identical everywhere it appears. --chart-mono is brand navy for chrome
     that is not a status colour. */
  --chart-status-excellent: var(--sec-green);
  --chart-status-good: #7DC470;
  --chart-status-okay: var(--ter-amber);
  --chart-status-fair: #D27326;
  --chart-status-poor: var(--sec-red);
  --chart-mono: var(--primary);

  /* AAA-safe ink for semantic colors used as TEXT on their own light tints.
     The vibrant --sec-green / --ter-amber / --sec-red read below 7:1 as small
     text, so badges, deltas and status labels use these darker shades while
     keeping the tinted fills. All clear 7:1 on a 16% tint over surface-3. */
  --sec-green-text: #245E3B;
  --ter-amber-text: #75360A;
  --sec-red-text: #831F23;

  /* Soft semantic tints (10%-ish) used as chip/badge fills. Previously only
     defined per-page in inline <style> blocks, so surfaces that pull in
     wise.css directly (e.g. the Non-UPF dashboard) rendered green/red/amber
     chips with no background. Defined here so every chip reads as a pill. */
  --sec-green-10: rgba(50, 169, 102, 0.12);
  --sec-red-10: rgba(220, 48, 56, 0.12);
  --ter-amber-10: rgba(255, 196, 52, 0.14);

  /* Scorecard surface — paper in light, chat-module navy in dark. Catalog
     panes (.dsc-theme-*) override this so a dark demo on a light page keeps
     fill and ink in the same theme (never light text on a white tile). */
  --scorecard-fill: var(--surface);
  /* WCAG AA+ ink for big numerals and status chips on --scorecard-fill.
     The vibrant --sec-green / --sec-red fills fail as text; these are the
     readable pair. Catalog dark panes remap the same values. */
  --score-ink: var(--text);
  --score-ink-red: var(--sec-red-text);
  --score-ink-green: var(--sec-green-text);
  --score-ink-amber: var(--ter-amber-text);
  --score-ink-blue: var(--primary-ink, var(--primary));

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  /* Product photo in every data table — a rounded-corner square, never a circle. */
  --w-prod-thumb-r: 8px;

  --shadow-1: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.04);
  --shadow-2: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.06);
  --shadow-card: var(--shadow-2);
  /* Chat module elevation is Little min — same drop as the other module cards.
     --chat-elev-gutter is the bottom shadow room inside #modules-row. */
  --chat-elev: var(--shadow-card);
  --chat-elev-gutter: 16px;
  /* Brand-navy lip on the chat module (.sc-card) — a step lighter than 40%
     so the edge reads without a charcoal outline. */
  --chat-rim-color: color-mix(in srgb, #05141C 28%, transparent);
  --chat-rim:
    inset 1px 1px 0 rgba(255, 255, 255, 0.82),
    inset -1px -1px 0 rgba(5, 20, 28, 0.14),
    inset 0 1px 0 color-mix(in srgb, #05141C 10%, #ffffff),
    inset 0 -1px 0 color-mix(in srgb, #05141C 14%, #000000);

  --modules-bottom-pad: 12px;
  --fs-ui: 0.75rem;
  --fs-label: 0.6875rem;
  --radius-pill: 9999px;
  /* Auth inputs + matching CTAs. (wise.css 290-291 in the 2026-09-24 served
     revision; added for the Form fields port, INTEL-382.) */
  --field-h: 42px;
  --panel-header-h: 60px;
  --wise-text-scale: 1;
  --wise-icon-scale: var(--wise-text-scale);
  --chat-line-height: 1.6;

  /* Canonical single-pane chat width — every chat module (Family A #chat-shell,
     the studio panes .rf-chat/.ap-chat/.sa-chat, and the injected WISEcodeAI dock)
     uses this width at the single tier. Default tier is screen-based: single on
     laptop-class viewports (≤1512 CSS px), double when wider — see
     WPaneWidth.defaultChatTier() in js/pane-width.js. */
  --chat-pane-w: 380px;

  /* Canonical right-module headline — the display title of whatever module sits
     to the right of the chat. Identical size/weight/face + top-left inset on
     every page. */
  --module-title-family: 'WISE Digits', 'Noto Serif', Georgia, serif;
  /* Brand serif (wise.css 309, revision of 2026-09-23). Read by .wise-btn--lg. */
  --font-serif: 'WISE Digits', 'Noto Serif', serif;
  --module-title-size: 1.2rem;
  --module-title-weight: 800;
  --module-head-pad-t: 26px;
  --module-head-pad-x: 40px;
  /* The rest of the module head rhythm (wise.css 311-323, revision served 2026-09-29; added for the
     Module shell port, INTEL-426: the drawer heads and the progress tracker read them). */
  --module-title-lh: 1.16;
  --module-head-pad-b: 14px;
  --module-head-pad-l: 20px;
  --module-head-ctrl-inset: 12px;
  --module-head-ctrl-gap: 2px;
  --module-sub-size: 0.78125rem;
  --module-sub-lh: 1.35;
  --module-sub-gap: 3px;

  /* Full monospace — code, paths, UPCs, barcodes, token names. WISE Digits
     (above) uses the same DM Mono face for 0–9 only; use this for whole strings. */
  --font-mono: 'DM Mono', ui-monospace, monospace;
}

/* ---- Serif headlines off (wise.css 272-279) ---- */
/* Serif headlines off (Appearance ▸ Accessibility). Titles use DM Sans at the
   same weights. Keep in sync with applySerifHeadlines() in js/topbar.js.
   `body` is listed so this beats per-page `--font-serif` on body.ai-chat-page. */
html.sans-headlines .wci,
html.sans-headlines body.wci {
  --module-title-family: 'WISE Digits', 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'WISE Digits', 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ---- Dark tokens (wise.css 281-339) ---- */
html.dark .wci {
  --bg: #05141C;
  --surface: #0D1B24;
  --surface-2: #112633;
  --surface-3: #15303F;
  --text: #F3F4F6;
  /* Lightened so muted/subtle clear AAA (7:1) on every navy surface up to the
     lightest (surface-3 #15303F). Subtle is the same ink. */
  --text-muted: #BCC6D3;
  --text-subtle: var(--text-muted);
  /* Legible accent on dark gradient chrome (rails, nav) — primary is too dark on navy. AAA (9.7:1) on surface. */
  --primary-bright: #8B9FAF;
  /* The helix lifts to a periwinkle on navy; the owl's in-progress ring follows
     it (wise.css 350-352, INTEL-372). */
  --helix-ink: #96B2DC;
  /* Brand-blue foregrounds go white on navy (see :root note). */
  --primary-ink: var(--text);
  /* These alias --primary (#25507C) in light mode, so on navy they inherit the
     same invisibility — brighten them like the other dark accents. */
  --ter-violet: var(--primary-bright);
  --ter-cyan: var(--primary-bright);

  /* Same semantic fills in dark — greens / ambers / reds stay readable on navy.
     --chart-mono lifts to the bright brand accent for non-status chrome. */
  --chart-status-excellent: var(--sec-green);
  --chart-status-good: #7DC470;
  --chart-status-okay: var(--ter-amber);
  --chart-status-fair: #D27326;
  --chart-status-poor: var(--sec-red);
  --chart-mono: var(--primary-bright);
  /* Brand-blue borders on dark: --primary (#25507C) is nearly invisible over
     navy, so tint from --primary-bright to keep borders on-brand yet visible. */
  --border: color-mix(in srgb, var(--primary-bright) 18%, transparent);
  --border-strong: color-mix(in srgb, var(--primary-bright) 30%, transparent);
  --primary-soft: rgba(37, 80, 124, 0.18);

  /* Softened pastel inks so semantic TEXT clears 7:1 on its own 16% tint over
     the navy surfaces (the vibrant fills only reached ~4.7:1 as small text). */
  --sec-green-text: #B6C9BE;
  --ter-amber-text: #D7BE91;
  --sec-red-text: #FFE1DC;
  --scorecard-fill: #1A2339;
  --score-ink: var(--text);
  --score-ink-red: #FF9E96;
  --score-ink-green: #6FE0A0;
  --score-ink-amber: var(--ter-amber-text);
  --score-ink-blue: #93C5FD;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.35);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
  --chat-elev: 0 2px 8px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.28);
  --chat-elev-gutter: 16px;
  /* Muted brand lip on navy — cream at 48% read as a bright outline. */
  --chat-rim-color: color-mix(in srgb, var(--primary-bright) 22%, transparent);
  --chat-rim:
    inset 1px 1px 0 rgba(249, 248, 243, 0.10),
    inset -1px -1px 0 rgba(0, 0, 0, 0.36),
    inset 0 1px 0 color-mix(in srgb, var(--primary-bright) 16%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }