/* ============================================================================
   DESIGN TOKENS — single source of truth for colours + fonts
   ============================================================================
   Every value here is PULLED VERBATIM from the Bilal-approved report mockup
   (report-mockup.html :root), which was itself derived via the UI/UX Pro Max
   skill ("Data-Dense Dashboard" style + "Blue data + amber highlights").
   Nothing here is invented. Do not add new colours/fonts without updating the
   mockup first — the mockup stays authoritative.

   WHY THESE CHOICES (carried over from the mockup design note):
   - BLUE (#1E40AF) as primary: analytical / financial-trust colour, and
     deliberately NEUTRAL — it is NOT eBay's own multi-colour brand, because
     this is a separate research tool, not an eBay product.
   - AMBER (#D97706) is RESERVED: used ONLY for the per-listing score signal
     and the "scored" group accent, so the eye goes straight to the one number
     that matters. Display-only signals stay muted grey, deliberately in the
     background of the hierarchy.
   - FONTS are LOCAL / NO-CDN: the report must render fully offline (Nichlist
     convention). The skill suggested Fira Sans / Fira Code (Google Fonts, CDN)
     — we map that intent to a system sans stack for body and a system
     MONOSPACE stack (+ tabular-nums) for numbers, so the "precise data" feel
     is kept without any network dependency.

   USAGE RULE: popup (T1) and report (T6) BOTH consume this one file. No colour
   or font is hardcoded anywhere else — every component references these tokens.

   NOT IN MOCKUP → left as TBD below (never invented): dark-mode palette,
   focus-ring colour, hover-state colours.
   ============================================================================ */

:root{

  /* ---- Brand / primary (blue = neutral analytical, NOT eBay brand) ---- */
  --primary:        #1E40AF;   /* headings, KPI values, links, primary accents */
  --primary-2:      #3B82F6;   /* lighter blue — secondary emphasis */
  --on-primary:     #FFFFFF;   /* text/icon on a primary fill */

  /* ---- Score / scored accent (amber = RESERVED for per-listing score only) ---- */
  --accent:         #D97706;   /* per-listing score number + "scored" group left-border/label ONLY */
  --on-accent:      #FFFFFF;   /* text/icon on an amber fill */

  /* ---- Surfaces ---- */
  --bg:             #F8FAFC;   /* page background */
  --card:           #FFFFFF;   /* card / panel background */
  --card-subtle:    #FCFDFE;   /* display-only group background (slightly off-white) */

  /* ---- Text ---- */
  --fg:             #1E3A8A;   /* deep-blue foreground (base text on bg) */
  --card-fg:        #1E3A8A;   /* text on cards */
  --muted-fg:       #475569;   /* labels, secondary/context text, display-only fields */

  /* ---- Muted fills / borders ---- */
  --muted:          #E9EEF6;   /* muted chip/fill, dividers, count-chip bg */
  --border:         #DBEAFE;   /* default card/field borders, dotted row dividers */
  --border-strong:  #C3D6F5;   /* stronger border variant */

  /* ---- Status ---- */
  --destructive:    #DC2626;   /* errors / hard-fail (available in mockup; not yet used in report body) */
  --ok:             #15803D;   /* "qualified" count in skip-transparency panel */
  --ok-bg:          #E7F5EC;   /* success-tint background */

  /* ---- CRITICAL: the "—" (not captured) vs "0" (genuine zero) distinction ---- */
  /* "—" NOT CAPTURED — greyed, italic, dashed underline. NEVER means zero. */
  --na-fg:          #94A3B8;   /* the "—" glyph + "data not captured" skip reason (also the image placeholder colour) */
  --na-bg:          #F1F5F9;   /* background of the "—" skip-reason count-chip */
  /* "0" GENUINE ZERO — full-strength value, it IS data, with an amber "genuine" tag. */
  --zero-fg:        #0F172A;   /* the bold genuine "0" value */
  --zero-badge-bg:  #FEF3C7;   /* "genuine"/"free"/"sold out" badge background */
  --zero-badge-fg:  #92400E;   /* "genuine" badge text */

  /* ---- caution box (velocity ToS-grey) — from the approved filters mockup ---- */
  --caution-bg:     #FEF6E7;
  --caution-border: #F0B24B;
  --caution-fg:     #7C4A03;

  /* ---- focus ring + hover (resolved from the approved popup mockups) ---- */
  --ring:           #1E40AF;   /* keyboard focus outline */
  --hover:          #F1F5F9;   /* subtle hover fill for utility controls */

  /* ---- Spacing scale (density 8/10 — dashboard) ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* ---- Typography (LOCAL fonts only — no CDN, offline-safe) ---- */
  /* Body / labels — system sans */
  --font-sans: -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Numbers / data — system monospace; pair with `font-variant-numeric: tabular-nums` */
  --font-mono: "Cascadia Code","Consolas","SF Mono",Menlo,"DejaVu Sans Mono",monospace;

}

/* ============================================================================
   DARK PALETTE — pulled from the approved popup redesign mockup (v0.1.18).
   Every token above is redefined here; nothing new is invented.

   Resolution strategy (both selectors carry the SAME values):
   - @media (prefers-color-scheme: dark) guarded by :not([data-theme="light"])
     → follows the OS by default, but a manual "light" choice still wins.
   - :root[data-theme="dark"] → manual dark toggle wins regardless of OS.
   The popup writes data-theme on <html> for the manual toggle.
   ============================================================================ */
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary:#60A5FA; --primary-2:#3B82F6; --on-primary:#0B1220;
    --accent:#FBBF24; --on-accent:#0B1220;
    --bg:#0F172A; --card:#1B2336; --card-subtle:#172033;
    --fg:#E2E8F0; --card-fg:#E2E8F0; --muted-fg:#94A3B8;
    --muted:#273244; --border:#334155; --border-strong:#475569;
    --destructive:#F87171; --ok:#4ADE80; --ok-bg:#12291B;
    --na-fg:#7C8AA0; --na-bg:#1E293B; --zero-fg:#F8FAFC; --zero-badge-bg:#3A2E12; --zero-badge-fg:#FCD34D;
    --caution-bg:#3A2E12; --caution-border:#A16207; --caution-fg:#FCD34D;
    --ring:#60A5FA; --hover:#22304A;
  }
}

:root[data-theme="dark"] {
  --primary:#60A5FA; --primary-2:#3B82F6; --on-primary:#0B1220;
  --accent:#FBBF24; --on-accent:#0B1220;
  --bg:#0F172A; --card:#1B2336; --card-subtle:#172033;
  --fg:#E2E8F0; --card-fg:#E2E8F0; --muted-fg:#94A3B8;
  --muted:#273244; --border:#334155; --border-strong:#475569;
  --destructive:#F87171; --ok:#4ADE80; --ok-bg:#12291B;
  --na-fg:#7C8AA0; --na-bg:#1E293B; --zero-fg:#F8FAFC; --zero-badge-bg:#3A2E12; --zero-badge-fg:#FCD34D;
  --caution-bg:#3A2E12; --caution-border:#A16207; --caution-fg:#FCD34D;
  --ring:#60A5FA; --hover:#22304A;
}