/* SherpaQuant design-mockup kit v2.1 — pure-black terminal tokens (single source of truth).
   Shared by every design-mockups/*.html so an approved mockup ports 1:1 to the app.
   Design Language v2.1: pure black, separation by space + elevation (NO divider bars),
   box-light, single electric accent #38BDF8, tabular numerics, restraint. */

:root {
  /* pure-black canvas + near-black elevation ladder (cool blue-charcoal) */
  --bg-base: #000000;
  --bg-0: #050608;
  --bg-1: #0a0c10; --bg-2: #101319; --bg-3: #171a22; --bg-4: #1e2230;
  /* back-compat aliases (older class refs map onto the ladder) */
  --bg-elevated: #0a0c10; --bg-surface: #0a0c10; --bg-surface-2: #101319;
  /* text ramp — dimmed white, never pure #fff */
  --txt: rgba(255,255,255,0.92); --txt-1: rgba(255,255,255,0.92);
  --txt-2: rgba(255,255,255,0.64); --txt-3: rgba(255,255,255,0.42); --txt-4: rgba(255,255,255,0.26);
  /* semantic signal colors — desaturated for a black bg, equal-brightness */
  --bull: #2ebd6b; --bull-dim: rgba(46,189,107,0.14);
  --bear: #f0494d; --bear-dim: rgba(240,73,77,0.14);
  --warning: #e3a008; --warn: #e3a008; --info: #3b82f6; --fade: #f0494d;
  /* the ONE electric accent — AI moments / active / CTA (used sparingly) */
  --accent: #38bdf8; --accent-soft: rgba(56,189,248,0.16);
  --glow: rgba(56,189,248,0.16);
  /* hairlines — structural use ONLY (dense table, input focus, one hero frame) */
  --hair: rgba(255,255,255,0.06); --hair-strong: rgba(255,255,255,0.10);
  --zebra: rgba(255,255,255,0.018); --hover: rgba(255,255,255,0.035);
  --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.16);
  --r-1: 6px; --r-2: 10px; --r-3: 14px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--txt);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.mono { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; }
.num { font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* surface primitives — BORDERLESS; depth = a lighter near-black tint, never a border/shadow */
.surface { background: var(--bg-1); border: none; }
.region { background: var(--bg-1); border-radius: var(--r-2); }
.region-flat { background: transparent; }
.slab { background: var(--bg-2); border-radius: var(--r-2); }
.elevated { background: var(--bg-2); }
.bd, .bd-d { border: none; }   /* retired: borders are no longer the separator */

/* text tiers + signal colors */
.t1 { color: var(--txt-1); } .t2 { color: var(--txt-2); } .t3 { color: var(--txt-3); } .t4 { color: var(--txt-4); }
.bull, .up { color: var(--bull); } .bear, .down { color: var(--bear); }
.info { color: var(--info); } .warn { color: var(--warning); } .fade { color: var(--fade); }
.accent { color: var(--accent); }

/* eyebrow — bare uppercase label, NEVER underlined (separation = space, not a rule) */
.eyebrow { font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }

/* score heatbar */
.heatbar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.06); overflow: hidden; }
.heatbar > span { display: block; height: 100%; border-radius: 3px; }

/* live pulse dot */
.pulse { position: relative; }
.pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  box-shadow: 0 0 0 0 var(--bull); animation: pulse 2s infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(46,189,107,0.5); } 70% { box-shadow: 0 0 0 6px rgba(46,189,107,0); } 100% { box-shadow: 0 0 0 0 rgba(46,189,107,0); } }

/* honesty chip (small, quiet — IN_VALIDATION / evidence; NOT a boxy banner) */
.honesty { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--txt-3); letter-spacing: .01em; }
.honesty .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--warning); }
.honesty.fade { color: var(--bear); } .honesty.fade .dot { background: var(--bear); }

/* chip */
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 5px; padding: 2px 7px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.chip-validation { background: rgba(227,160,8,0.14); color: var(--warning); }
.chip-live { background: var(--bull-dim); color: var(--bull); }
.chip-accent { background: var(--accent-soft); color: var(--accent); }

/* legacy decorative classes — kept for back-compat; v2.1 pages no longer use them */
.grid-tex {
  background-image:
    linear-gradient(rgba(56,189,248,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
}
.ground-glow { background: radial-gradient(ellipse at bottom, rgba(56,189,248,0.10) 0%, rgba(5,8,9,0.10) 42%, rgba(5,8,9,0) 74%); }
.frame-glow { box-shadow: 0 50px 150px rgba(0,0,0,0.78), 0 0 90px var(--glow); }  /* one hero frame only */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }