/* ════════════════════════════════════════════════════════════════════════
   AURORAVOLT — ATMOSPHERIC UTILITY DESIGN SYSTEM (v2.0)
   Master token layer. Load before auroravolt_core.css + auroravolt_visual.css.
   Manifest: SITE_OVERHAUL_MANIFEST.md (vault 03 - Initiatives/Product Development)
   Aesthetic: high-density financial workstation (RookieLegends-class) + night-sky brand.
   Phase 4 ported pages use av_tokens.css instead — do not load both on one surface.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── THEME IDENTITY ── */
  --theme-name: 'Atmospheric Utility';
  --theme-version: '2.0';

  /* ── AURORA SPECTRUM (primary brand · Directive mint, v3 Directive skin) ── */
  --aurora: #7CFFB2;
  --aurora-2: #38E5D6;
  --aurora-dim: #5FDC96;
  --aurora-deep: #3FB878;
  --aurora-ghost: rgba(124, 255, 178, 0.08);
  --aurora-line: rgba(124, 255, 178, 0.18);
  --aurora-glow: rgba(124, 255, 178, 0.45);
  --aurora-soft: rgba(124, 255, 178, 0.12);
  --aurora-ring: rgba(124, 255, 178, 0.35);
  --aurora-ribbon: linear-gradient(115deg, #7CFFB2 0%, #38E5D6 26%, #6B8CFF 52%, #A98BFF 74%, #FF4FA0 100%);

  /* RGB channel tokens — for rgba(var(--*-rgb), a) alphas in legacy inline CSS */
  --aurora-rgb: 124, 255, 178;
  --pink-rgb: 255, 79, 160;
  --purple-rgb: 169, 139, 255;

  /* Legacy aliases — entire legacy stack reads these */
  --teal: #38E5D6;
  --teal-2: #5FEDE0;
  --teal-dim: #2AB8AC;
  --teal-ghost: rgba(56, 229, 214, 0.08);
  --volt: var(--aurora);

  /* ── LANE ACCENTS (workspace modes · one per view) ── */
  --pink: #FF4FA0;
  --pink-2: #FF7FBE;
  --pink-deep: #D63E88;
  --purple: #A98BFF;
  --purple-2: #8B6FE0;
  --gold: #FFD87C;
  --gold-dim: #C9A75C;
  --cta: #FF4FA0;
  --cta-2: #A98BFF;
  --lane-flipper: var(--aurora);
  --lane-player: var(--purple);
  --lane-vendor: var(--gold);
  --lane-bazaar: var(--pink);

  /* ── VOID + SURFACES (night sky) ── */
  --void: #04050B;
  --bg: #060810;
  --bg-2: #0A0D18;
  --bg-3: #0F1324;
  --space-charcoal: rgba(8, 12, 20, 0.92);

  /* ── PANELS & GLASS ── */
  --panel: rgba(15, 19, 36, 0.72);
  --panel-2: rgba(20, 26, 48, 0.82);
  --panel-solid: #0F1324;
  --panel-solid-2: #141A30;
  --line: #222A45;
  --line-2: rgba(124, 255, 178, 0.14);

  --glass-bg: rgba(10, 15, 24, 0.42);
  --glass-bg-strong: rgba(8, 12, 22, 0.78);
  --glass-blur: 36px;
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.04);

  /* ── INK (type colors) ── */
  --ink: #F4F6FF;
  --ink-2: #AEB6D6;
  --ink-3: #6B7396;
  --ink-on-accent: #04050B;

  /* ── FINANCIAL SEMANTICS ── */
  --up: #7CFFB2;
  --down: #FF7A59;
  --money-in: var(--up);
  --money-out: var(--down);
  --neutral: var(--ink-3);
  --stale: var(--gold);
  --live: var(--aurora);
  --demo: var(--gold-dim);
  --warning: #FFD87C;
  --danger: var(--down);

  /* ── TYPOGRAPHY STACKS ── */
  --font-data: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --font-ui: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-display: 'Archivo', var(--font-ui);
  --cond: var(--font-display);
  --body: var(--font-ui);
  --mono: var(--font-data);

  /* ── TYPE SCALE (workstation) ── */
  --text-display: clamp(34px, 4.6vw, 58px);
  --text-h2: clamp(26px, 3.2vw, 40px);
  --text-body: 15px;
  --text-ui: 13px;
  --text-caption: 11px;
  --ws-font-micro: 9.5px;
  --ws-font-label: 10px;
  --ws-font-data: 12.5px;
  --ws-font-stat: 13px;
  --ws-font-kpi: clamp(22px, 2.4vw, 30px);

  --track-tight: -0.03em;
  --track-display: -0.025em;
  --track-label: 0.08em;
  --track-eyebrow: 0.12em;
  --track-caps: 0.14em;
  --leading-tight: 1.05;
  --leading-display: 0.96;
  --leading-body: 1.6;

  /* ── WORKSTATION DENSITY (financial terminal) ── */
  --ws-container: 1260px;
  --ws-pad-x: clamp(20px, 3.5vw, 40px);
  --ws-section-y: clamp(40px, 5vw, 64px);
  --ws-gap: 14px;
  --ws-gap-tight: 8px;

  --ws-chrome-strip: 44px;
  --ws-chrome-nav: 64px;
  --ws-chrome-ticker: 34px;
  --ws-chrome-promo: 72px;
  --ws-chrome-budget: 128px;
  --ws-chrome-mobile: 64px;

  --ws-row-compact: 32px;
  --ws-row: 40px;
  --ws-row-expanded: 48px;
  --ws-cell-x: 14px;
  --ws-cell-y: 11px;
  --ws-header-y: 12px;
  --ws-input-h: 40px;
  --ws-chip-h: 36px;
  --ws-tap-min: 44px;

  /* ── RADIUS ── */
  --r-micro: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ── SPACING SCALE ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── ELEVATION (tinted shadows · single light source) ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-panel: 0 4px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 var(--glass-highlight);
  --shadow-glow-aurora: 0 0 24px var(--aurora-glow);
  --shadow-glow-gold: 0 0 20px rgba(231, 194, 125, 0.25);

  /* ── SNAPPY MOTION (terminal UI · no page-load choreography) ── */
  --dur-instant: 80ms;
  --dur-fast: 120ms;
  --dur-med: 180ms;
  --dur-slow: 260ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);

  /* ── Z-INDEX SCALE ── */
  --z-base: 1;
  --z-sticky: 50;
  --z-nav: 100;
  --z-overlay: 150;
  --z-modal: 200;
  --z-toast: 250;

  /* ── FOCUS (keyboard nav) ── */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--aurora-ring);
}

/* ── Global data numerals ── */
.tabular,
.av-table td,
.av-table th,
.tick,
.live,
.ws-stat,
.ws-kpi {
  font-variant-numeric: tabular-nums;
}

/* ── Night-sky atmosphere (subtle — no clutter) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 75% 55% at 8% -8%, rgba(0, 255, 65, 0.11), transparent 52%),
    radial-gradient(ellipse 60% 45% at 92% 4%, rgba(0, 180, 255, 0.06), transparent 50%),
    radial-gradient(ellipse 70% 40% at 50% 110%, rgba(0, 255, 65, 0.05), transparent 56%),
    linear-gradient(180deg, rgba(5, 8, 15, 0.4) 0%, transparent 35%, rgba(0, 0, 0, 0.15) 100%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 78% 32%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 44% 72%, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1px 1px at 91% 84%, rgba(255, 255, 255, 0.3), transparent);
}

/* ── Workstation layout primitives ── */
.ws-container {
  max-width: var(--ws-container);
  margin: 0 auto;
  padding-left: var(--ws-pad-x);
  padding-right: var(--ws-pad-x);
}

.ws-section {
  padding-top: var(--ws-section-y);
  padding-bottom: var(--ws-section-y);
}

.ws-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-gap-tight);
  align-items: center;
}

.ws-kpi {
  font-family: var(--font-data);
  font-size: var(--ws-font-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 9px 13px;
  background: var(--panel-solid);
}

.ws-kpi b,
.ws-kpi .val {
  color: var(--ink);
  font-weight: 700;
}

.ws-kpi .pos { color: var(--money-in); }
.ws-kpi .neg { color: var(--money-out); }

/* ── Glass panel utility ── */
.glass-panel,
.av-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight);
}

/* ── Terminal table — financial workstation density ── */
.terminal-table .av-tablewrap,
.av-tablewrap.terminal,
.av-tablewrap.ws-dense {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border-color: var(--aurora-line);
}

.terminal-table .av-table th,
.av-tablewrap.terminal .av-table th,
.av-tablewrap.ws-dense .av-table th {
  background: rgba(8, 12, 20, 0.95);
  color: var(--ink-3);
  font-family: var(--font-data);
  font-size: var(--ws-font-label);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  padding: var(--ws-header-y) var(--ws-cell-x);
  min-height: var(--ws-row-compact);
}

.terminal-table .av-table td,
.av-tablewrap.terminal .av-table td,
.av-tablewrap.ws-dense .av-table td {
  padding: var(--ws-cell-y) var(--ws-cell-x);
  font-family: var(--font-data);
  font-size: var(--ws-font-data);
  min-height: var(--ws-row);
}

.terminal-table .av-table tbody tr,
.av-tablewrap.terminal .av-table tbody tr,
.av-tablewrap.ws-dense .av-table tbody tr {
  transition: background var(--dur-fast) var(--ease);
}

.terminal-table .av-table tbody tr:hover,
.av-tablewrap.terminal .av-table tbody tr:hover,
.av-tablewrap.ws-dense .av-table tbody tr:hover {
  background: rgba(0, 255, 65, 0.06);
}

.terminal-table .av-table tbody tr.active,
.av-tablewrap.terminal .av-table tbody tr.active,
.av-tablewrap.ws-dense .av-table tbody tr.active {
  background: rgba(0, 255, 65, 0.1);
  box-shadow: inset 2px 0 0 var(--aurora);
}

.terminal-table .av-table .num,
.av-tablewrap.terminal .av-table .num,
.av-tablewrap.ws-dense .av-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.terminal-table .av-table .pos,
.av-tablewrap.terminal .av-table .pos { color: var(--money-in); }
.terminal-table .av-table .neg,
.av-tablewrap.terminal .av-table .neg { color: var(--money-out); }

/* ── Snappy data controls ── */
.snappy button,
.snappy .btn-ghost,
.snappy .btn-primary,
.snappy .seg button,
.snappy .search,
.snappy input,
.snappy select {
  transition:
    color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-med) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.snappy button:active,
.snappy .btn-primary:active {
  transform: translateY(1px) scale(0.985);
}

.snappy button:focus-visible,
.snappy .btn-primary:focus-visible,
.snappy .btn-ghost:focus-visible,
.snappy input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Brand logo mark (nav) ── */
.nav-mark.logo-mark,
.mark.logo-mark {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: var(--r-sm);
  overflow: hidden;
  padding: 0;
}

.nav-mark.logo-mark img,
.mark.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  filter: drop-shadow(0 0 10px var(--aurora-glow));
}

.nav-logo {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  object-fit: cover;
  object-position: center 18%;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px var(--aurora-glow));
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 1 — SHELL UNIFICATION (nav / chrome / containers)
   Loaded last — overrides legacy L1/L2 shell clutter without touching page content.
   ════════════════════════════════════════════════════════════════════════ */

/* Legacy .wrap → workstation container width */
.wrap:not(.doc-wrap),
.sec-nav-inner,
.avc-footer-in,
body.landing-page .wrap {
  max-width: var(--ws-container);
  padding-left: var(--ws-pad-x);
  padding-right: var(--ws-pad-x);
}

/* Print / minimal pages — no atmosphere or shell chrome */
body.receipt-print {
  padding-top: 18px !important;
  background: #f2f2f4 !important;
  color: #111 !important;
  font-family: system-ui, -apple-system, sans-serif !important;
}

body.receipt-print::before,
body.receipt-print::after {
  display: none;
}

/* ── Primary top nav (tool + workspace pages) ── */
body:not(.receipt-print):not(.landing-page) > nav,
body:not(.receipt-print):not(.landing-page) > nav#nav {
  height: var(--ws-chrome-nav) !important;
  min-height: var(--ws-chrome-nav);
  padding-left: var(--ws-pad-x) !important;
  padding-right: var(--ws-pad-x) !important;
  gap: var(--ws-gap-tight);
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border-bottom: 1px solid var(--aurora-line) !important;
  box-shadow: none !important;
}

/* Doc + static shells */
body.doc-page nav.doc-nav,
body.static-404 nav.static-nav {
  height: var(--ws-chrome-nav) !important;
  min-height: var(--ws-chrome-nav);
  padding-left: var(--ws-pad-x) !important;
  padding-right: var(--ws-pad-x) !important;
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border-bottom: 1px solid var(--aurora-line) !important;
}

body.doc-page {
  padding-top: var(--ws-chrome-nav);
}

/* Workspace: ticker strip + nav stack */
.av-ticker,
.avc-ticker {
  height: var(--ws-chrome-strip) !important;
}

body.ws-page {
  padding-top: calc(var(--ws-chrome-strip) + var(--ws-chrome-nav)) !important;
}

body.ws-page > nav,
body.ws-page > nav#nav {
  top: var(--ws-chrome-strip) !important;
  height: var(--ws-chrome-nav) !important;
}

body.ws-page .sec-nav {
  top: calc(var(--ws-chrome-strip) + var(--ws-chrome-nav)) !important;
}

body.ws-page nav.hide ~ .sec-nav {
  top: var(--ws-chrome-strip) !important;
}

/* av_champ retrofit ticker pages (ev, psa) */
body[data-avc-ticker] {
  padding-top: calc(var(--ws-chrome-strip) + var(--ws-chrome-nav)) !important;
}

body[data-avc-ticker] > nav {
  top: var(--ws-chrome-strip) !important;
  height: var(--ws-chrome-nav) !important;
}

/* Default tool pages (no ticker) */
body:not(.ws-page):not(.landing-page):not(.receipt-print):not(.doc-page):not(.static-page):not(.bz-page):not([data-avc-ticker]) {
  padding-top: var(--ws-chrome-nav);
}

/* ── Nav clutter cleanup — logo + links (Atmospheric Utility) ── */
body:not(.landing-page) > nav .nav-mark.logo-mark,
body.doc-page .nav-mark.logo-mark,
body.static-404 .nav-mark.logo-mark {
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

body.ws-page .nav-mark:not(.logo-mark) {
  background: linear-gradient(140deg, var(--aurora), var(--aurora-dim)) !important;
  color: var(--ink-on-accent) !important;
  box-shadow: 0 0 0 1px var(--aurora-line), 0 0 16px var(--aurora-glow) !important;
}

body.ws-page .nav-name em,
body.ws-page .nav-name span,
body:not(.landing-page) > nav .nav-name em {
  color: var(--aurora) !important;
  text-shadow: 0 0 12px var(--aurora-glow) !important;
}

body.ws-page .nav-home,
body:not(.landing-page) > nav .nav-home {
  font-family: var(--font-display) !important;
  font-size: var(--text-ui) !important;
  font-weight: 600 !important;
  letter-spacing: var(--track-label) !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  margin-left: var(--space-3) !important;
}

body.ws-page .nav-home[href*="bazaar"],
body:not(.landing-page) > nav .nav-home[href*="bazaar"] {
  color: var(--aurora) !important;
}

/* Landing promo stack uses separate chrome — align container only */
body.landing-page nav {
  height: var(--ws-chrome-nav);
  padding-left: var(--ws-pad-x);
  padding-right: var(--ws-pad-x);
}

/* Championship footer container width */
footer.avc-footer .avc-footer-in {
  max-width: var(--ws-container);
  padding-left: var(--ws-pad-x);
  padding-right: var(--ws-pad-x);
}

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

@media (prefers-reduced-transparency: reduce) {
  .glass-panel,
  .av-glass,
  .terminal-table .av-tablewrap,
  .av-tablewrap.terminal,
  .av-tablewrap.ws-dense {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--panel-solid);
  }

  body::before,
  body::after {
    display: none;
  }
}
/* ── AV-01 SHELL MOUNT RESERVE (2026-07-10) ──────────────────────────────
   Legacy-skin pages that adopted the canonical #av-nav mount (ev, psa,
   success, receipt) reserve the nav height before av_shell renders into
   it — mirrors the anti-flicker rule in av_tokens.css, zero-CLS mount. */
#av-nav { min-height: 64px; }