/* ════════════════════════════════════════════════════════════════
 * BigLong design tokens
 * Canonical tokens for the BigLong workspaces.
 * Fonts: self-hosted latin woff2 subsets (no CDN)
 * ════════════════════════════════════════════════════════════════ */

/* Keep the first painted font for this navigation when a download is slow.
   Metric fallbacks alone cannot match every glyph width and line wrap. */
@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/vendor/fonts/ClashDisplay-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/vendor/fonts/ClashDisplay-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/vendor/fonts/ClashDisplay-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('/vendor/fonts/SpaceGrotesk-latin.woff2') format('woff2');
  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: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url('/vendor/fonts/Geist-latin.woff2') format('woff2');
  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: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url('/vendor/fonts/GeistMono-latin.woff2') format('woff2');
  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;
}

/* ── Metric-overridden fallbacks (CLS guard) ──
   Local fallbacks carry the web fonts' vertical metrics (hhea asc/desc/gap ÷
   upm) and measured width ratios (size-adjust, canvas-measured vs Arial) so
   the font-display:swap doesn't re-flow line boxes or re-wrap text when the
   woff2 lands after first paint. */
@font-face {
  font-family: 'Clash Display Fallback';
  src: local('Arial');
  /* hhea: upm 1000, asc 890, desc 250, gap 90 (fontTools). size-adjust =
     clash avg lowercase advance 0.5651 ÷ Arial 0.5095. Overrides pre-divided
     by size-adjust per the convention below. */
  size-adjust: 110.9%;
  ascent-override: 80.25%;
  descent-override: 22.54%;
  line-gap-override: 8.12%;
}

@font-face {
  font-family: 'Space Grotesk Fallback';
  src: local('Arial');
  size-adjust: 112.43%;
  /* overrides pre-divided by size-adjust (browser re-multiplies) */
  ascent-override: 87.52%;
  descent-override: 25.97%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial');
  size-adjust: 104.17%;
  ascent-override: 96.48%;
  descent-override: 28.32%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Geist Mono Fallback';
  src: local('Menlo'), local('Courier New');
  ascent-override: 100.5%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}

/* ── Token root ── */
/* Icon-font arrival must not resize the surrounding label. */
.ph::before {
  display: inline-block;
  width: 1em;
}

:root {
  color-scheme: dark;

  /* ── Colors ── */
  --bg: #09090b;
  --bg-grad: linear-gradient(var(--bg), var(--bg));
  --panel: #111114;
  --panel-2: #16161a;
  --panel-elev: #1a1a1f;
  --ink: #fafafa;
  --ink-dim: #a1a1aa;
  --ink-mute: #a1a1aa;
  --ink-decoration: #71717a;
  --line: #26262b;
  --line-soft: #1d1d22;
  --control-border: #71717a;
  --selected-bg: #172a46;
  --selected-ink: #93c5fd;
  --on-accent: #09090b;
  --pos: #34d399;
  --neg: #f87171;
  --warn: #fbbf24;
  --accent: #60a5fa;
  --accent-2: #c084fc; /* violet — secondary accent (e.g. last-active, special tags) */
  --accent-3: #22d3ee; /* cyan — tertiary accent (e.g. sky/info states) */
  --dot-grid: transparent;
  /* chip chrome — .sig-chip (shared-styles.css) + .ms-rs/.ms-acc (shared-layout.js) */
  --chip-bg: rgba(255, 255, 255, 0.04);
  --chip-line: rgba(255, 255, 255, 0.07);

  /* ── Font stacks ── */
  --font-display:
    'Geist', 'Geist Fallback', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:
    'Geist', 'Geist Fallback', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui,
    sans-serif;
  --font-mono: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Type scale — 9 steps ──
     Display sizes shrink per breakpoint via token redefinition below;
     small label sizes stay fixed for legibility. */
  /* Snapped to THQ design-tokens.css numeric scale for cross-app consistency.
     --fs-micro=fs-9  2xs=fs-10  xs=fs-11  sm=fs-12  base=fs-13
     md=fs-16  lg=fs-17  xl=fs-22  2xl=fs-28 */
  --fs-micro: 11px; /* status markers and inline notes */
  --fs-2xs: 12px; /* kicker labels, meta keys */
  --fs-xs: 12px; /* small labels, mono captions */
  --fs-sm: 12px; /* body-small: details, meta values, section meta */
  --fs-base: 13px; /* section body, regime tag */
  --fs-md: 14px; /* primary data and compact card headings */
  --fs-lg: 16px; /* section headings and emphasized data */
  --fs-xl: 22px; /* etf price emphasis */
  --fs-2xl: 28px; /* hero values: mc-value, regime title, etf symbol */

  /* ── Weights ── */
  --fw-reg: 400;
  --fw-med: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* ── Tracking ── */
  --track-tight: -0.01em;
  --track-wide: 0.04em;
  --track-wider: 0.06em;
  --track-widest: 0.08em;
  --track-max: 0.1em;

  /* ── Radii ── */
  --r-pill: 999px;
  --r-panel: 8px;
  --r-card: 8px;
  --r-chip: 6px;
  --control-bg-active: color-mix(in srgb, var(--accent) 12%, var(--panel));
  --control-line-active: color-mix(in srgb, var(--accent) 50%, var(--line));
  --motion-fast: 120ms;
  --motion-standard: 180ms;

  /* ── Filter-chip size (leaders / scans / monsters) ──
     Scans capsules were the readable example: bump type one step and
     pad to a 30px row. Coarse-pointer pages still overlay min-height 44px. */
  --chip-fs: var(--fs-sm);
  --chip-pad-y: 6px;
  --chip-pad-x: 10px;
  --chip-min-h: 32px;
  --r-cell: 6px;
  --r-badge: 4px;
  --r-xs: 3px;
  --r-2xs: 2px;
}

/* ── Responsive type scale — 760px breakpoint ── */
@media (max-width: 760px) {
  :root {
    /* shrink the display steps of the scale; labels (xs/2xs/micro) stay fixed */
    --fs-2xl: 22px;
    --fs-xl: 17px;
    --fs-lg: 16px;
    --fs-md: 14px;
    --fs-base: 12px;
    --fs-sm: 12px;
  }
}

/* ── Responsive type scale — 420px breakpoint ── */
@media (max-width: 420px) {
  :root {
    --fs-2xl: 19px;
    --fs-xl: 16px;
    --fs-lg: 14px;
  }
}

/* ── Light theme overrides ── */
html[data-theme='light'] {
  color-scheme: light;
  --bg: #f4f4f5;
  --bg-grad: linear-gradient(var(--bg), var(--bg));
  --panel: #ffffff;
  --panel-2: #fafafa;
  --panel-elev: #ffffff;
  --ink: #18181b;
  --ink-dim: #52525b;
  --ink-mute: #606069;
  --ink-decoration: #a1a1aa;
  --line: #e4e4e7;
  --line-soft: #efeff1;
  --control-border: #71717a;
  --selected-bg: #eff6ff;
  --selected-ink: #1d4ed8;
  --on-accent: #ffffff;
  --pos: #065f46;
  --neg: #dc2626;
  --warn: #b45309;
  --accent: #2563eb;
  --accent-2: #7c3aed;
  --accent-3: #0e7490;
  --dot-grid: transparent;
  --chip-bg: rgba(0, 0, 0, 0.04);
  --chip-line: rgba(0, 0, 0, 0.08);
}

/* ── Smooth theme transition (background only — avoids layout jank) ── */
html {
  transition: background-color 0.15s;
}

/* ── Base resets ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── Global selection highlight ── */
::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── Global focus ring — all interactive elements ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Thin scrollbars (global default) ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 2px;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  background-image: var(--bg-grad);
  color: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Dot-grid body pattern layered on top of radial bg-grad */
body {
  background-image:
    var(--bg-grad),
    radial-gradient(var(--dot-grid, rgba(255, 255, 255, 0.012)) 1px, transparent 1px);
  background-size:
    auto,
    24px 24px;
}

/* ── Utility: anything numeric uses mono with tabular alignment ── */
.num,
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Page gutter: identical content padding on every page ── */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --page-pad-y: var(--space-4);
  --page-pad-x: var(--space-6);

  /* ── Spacing rhythm (shared across pages; NOT named --sp-* to avoid
        collision with matrix page-local vars) ── */
  --gap-section: var(--space-6); /* between major page sections */
  --gap-grid: 18px; /* preserve existing chart grid gutters */
  --gap-row: var(--space-3); /* rows inside a card/panel */
  --gap-tight: var(--space-2); /* chip groups, inline clusters */
  --pad-card: var(--space-4); /* canonical nonchart card padding */
}

@media (max-width: 1024px) {
  :root {
    --page-pad-x: var(--space-4);
  }
}
/* Phone gutters remain aligned with navigation and the page title. */
@media (max-width: 480px) {
  :root {
    --page-pad-x: var(--space-3);
  }
}

.wrap {
  max-width: none;
  margin: 0 auto;
  padding: var(--page-pad-y) var(--page-pad-x) 80px;
}

/* Matrix page toolbar (page-level header, not the shared shell) — content must
   align with the shared page gutter, not sit flush at the viewport edge. */
body[data-universe] > header:not(.zth-header) {
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
}

/* Dashboard pages use #main-content (Tailwind utility classes on the element
   set their own gutters — override so every page shares one gutter). */
#main-content,
.zth-main {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
  padding-top: var(--page-pad-y) !important;
}

/* ── CLS guards ──────────────────────────────────────────────────
   shared-layout.js replaces these placeholders after DOM parse; reserve
   their expected footprint before the measured header height is available.
   Header: 48px controls + 1px border; narrow screens add 44px workspaces.
   Footer: ~112px desktop (24px pad + row + meta + 28px pad) + 48px margin. */
:root {
  --zth-header-height: 49px;
  --zth-context-font-size: 18px;
  --zth-context-height: calc(var(--zth-context-font-size) * 1.3 + 21px);
}
@media (max-width: 680px) {
  :root {
    --zth-header-height: 93px;
    --zth-context-font-size: 17px;
  }
}
#shared-header {
  /* Page title/actions are static siblings; only navigation is deferred. */
  height: var(--zth-header-height);
  box-sizing: border-box;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
#shared-footer {
  min-height: 112px;
  /* mirrors shared-styles.css "body > footer" margin so the swap is shift-free */
  margin-top: clamp(1.75rem, 2.5vw, 3.5rem);
  box-sizing: border-box;
  background: var(--panel);
  border-top: 1px solid var(--line);
}