/* ============================================================================
   ListingIQ shared design system — extracted from the War Room design handoff
   (design/war_room_handoff/README.md, 2026-07-10).

   One token set, two page defaults:
   - landing / scan / legal / logged-out views boot LIGHT (sky→green)
   - the logged-in dashboard (Growth + Command) boots DARK (deep-ocean teal)
   The user's explicit toggle choice is stored in localStorage `liq_theme` and
   wins over both defaults on every page (each page's boot script implements
   this; this file only defines the tokens and base styles).

   Semantic colors carry MEANING site-wide (never decoration):
   red = urgent/threat · amber = opportunity/window · green = good/gain/done.

   Fonts: Space Grotesk = display/numbers/labels · Hanken Grotesk = body/UI.
   (JetBrains Mono stays available for genuinely monospaced data like ASINs.)
   ========================================================================== */

/* Token values = the round-5 FINAL set from the Growth design handoff
   (design/growth_handoff/README.md, 2026-07-11) — the same design system,
   with deepened structural lines (--innerbd, --ringln pass the squint test)
   and the new surface tokens (--panel/--fixbg/--actbg/--band/--stripe). */
:root, :root[data-theme="light"] {
  --wall: linear-gradient(172deg, #bfe2ec, #cbe8d6 60%, #c1e2c8);
  --wallsolid: #eaf5ee;
  --txt: #14301f;
  --txt2: #3f5a48;
  --txt3: #5f7c67;
  --glass: rgba(255, 255, 255, .78);
  /* Light theme: the card edge must be DARKER than the card, not lighter. At
     rgba(255,255,255,.95) the border was brighter than the .78 white fill, so a
     card had no perceptible boundary on the pale wall and two stacked cards read
     as one merged slab (Zona, Competitors room, 2026-09-09). Same ink family as
     --innerbd so nested surfaces stay consistent. */
  --glassbd: rgba(20, 60, 40, .16);
  --panel: rgba(255, 255, 255, .5);
  --inner: rgba(255, 255, 255, .94);
  --innerbd: rgba(20, 60, 40, .24);
  --fixbg: rgba(56, 140, 99, .09);
  --actbg: rgba(20, 60, 40, .06);
  /* Darkened from #469a6e (2026-09-09). White text on the old green measured
     3.44:1 — below WCAG AA 4.5 for normal text — which meant EVERY primary
     button on every light-theme page failed, the login CTA included. Same hue
     and saturation, lightness pulled down until it clears AA (4.58:1). */
  --accent: #3a835c;
  --accent-2: #316f4e;             /* hover shade of the accent */
  --accent-soft: rgba(70, 154, 110, .14);
  /* Design color ruling v6: #3a835c is for FILLS (buttons, rings, borders). As a
     TEXT colour it measures only 4.33:1 on a card surface, so text in the accent
     hue (links, outline-button labels, arrow values, numbers) uses this 5.74:1 ink. */
  --accent-ink: #2f6e4c;
  --onaccent: #ffffff;
  --ringln: rgba(20, 70, 45, .36);
  --radarbg: rgba(255, 255, 255, .42);
  --fillbar: #3d8f63;
  --emptybar: rgba(20, 60, 40, .13);
  --band: rgba(70, 154, 110, .14);
  --danger: #c62f22;
  --danger-soft: rgba(198, 47, 34, .12);
  --danger-bd: rgba(198, 47, 34, .5);
  --warn: #a4690c;
  --warn-soft: rgba(164, 105, 12, .14);
  --warn-bd: rgba(164, 105, 12, .45);
  --onwarn: #ffffff;
  --ondanger: #ffffff;
  --good: #0b6c3a;
  --good-soft: rgba(11, 108, 58, .14);
  --good-bd: rgba(11, 108, 58, .55);
  --ongood: #ffffff;
  --radarfill: rgba(70, 154, 110, .16);
  --stripe: rgba(20, 60, 40, .07);
  /* -10px spread against an 18px blur cancelled the lift almost entirely; the
     card had neither an edge nor a shadow to sit on. */
  --shadow: 0 3px 12px -5px rgba(30, 70, 50, .26);
  --shadow-big: 0 24px 60px -20px rgba(30, 70, 50, .45);
}
:root[data-theme="dark"] {
  --wall: linear-gradient(165deg, #123a5e, #154f6c 60%, #1a6a72);
  --wallsolid: #123a5e;
  --txt: #ffffff;
  --txt2: rgba(255, 255, 255, .82);
  --txt3: rgba(255, 255, 255, .62);
  --glass: rgba(255, 255, 255, .1);
  --glassbd: rgba(255, 255, 255, .22);
  --panel: rgba(255, 255, 255, .06);
  --inner: rgba(255, 255, 255, .15);
  --innerbd: rgba(255, 255, 255, .42);
  --fixbg: rgba(127, 230, 194, .09);
  --actbg: rgba(255, 255, 255, .06);
  --accent: #ffffff;               /* on dark, primary actions are white with teal ink */
  --accent-2: rgba(255, 255, 255, .88);
  --accent-soft: rgba(255, 255, 255, .14);
  --accent-ink: #ffffff;           /* dark: accent text stays white, as today */
  --onaccent: #124a63;
  --ringln: rgba(255, 255, 255, .46);
  --radarbg: rgba(255, 255, 255, .05);
  --fillbar: rgba(255, 255, 255, .92);
  --emptybar: rgba(255, 255, 255, .24);
  --band: rgba(127, 230, 194, .16);
  --danger: #ff9a90;
  --danger-soft: rgba(255, 120, 110, .18);
  --danger-bd: rgba(255, 154, 144, .6);
  --warn: #ffc857;
  --warn-soft: rgba(255, 200, 87, .18);
  --warn-bd: rgba(255, 200, 87, .55);
  --onwarn: #3a2604;               /* bright dark-mode amber needs dark ink for contrast */
  --ondanger: #4a1410;             /* bright dark-mode red likewise */
  --good: #7fe6c2;
  --good-soft: rgba(127, 230, 194, .18);
  --good-bd: rgba(127, 230, 194, .6);
  --ongood: #0b3b2c;
  --radarfill: rgba(127, 230, 194, .18);
  --stripe: rgba(255, 255, 255, .06);
  --shadow: 0 8px 24px -12px rgba(0, 0, 0, .5);
  --shadow-big: 0 24px 60px -20px rgba(0, 0, 0, .6);
}
/* War-room-era rule kept: slightly steeper wall gradient on phones */
@media (max-width: 640px) {
  :root, :root[data-theme="light"] { --wall: linear-gradient(175deg, #bfe2ec, #cbe8d6 60%, #c1e2c8); }
  :root[data-theme="dark"] { --wall: linear-gradient(175deg, #123a5e, #154f6c 60%, #1a6a72); }
}

body {
  background: var(--wall);
  background-attachment: fixed;
  color: var(--txt);
  font-family: 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Space Grotesk', 'Hanken Grotesk', sans-serif; }

/* Shared glass panel primitive (pages may extend with their own classes) */
.glass {
  background: var(--glass);
  border: 1px solid var(--glassbd);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}