/* ====
   APS Design Tokens — "Instrument-Grade" (DisplayInput redesign)
   Single shared source of truth. Same variable names as before, so
   every existing component (archive, loop cards, revamp widgets)
   adopts the new look automatically. Warm-cream base replaced with a
   crisp, data-forward neutral + signal-blue accent.
   ==== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* == Surfaces & text (cool neutral base) == */
  --aps-bg:#F4F6F8;
  --aps-surface:#FFFFFF;
  --aps-border:#E4E8EC;
  --aps-t1:#0B1220;
  --aps-t2:#475467;
  --aps-t3:#8A94A6;

  /* == Semantic pairs == */
  --aps-good-bg:#E6F5EC; --aps-good-fg:#12924A;
  --aps-warn-bg:#FBEFD8; --aps-warn-fg:#B96E00;
  --aps-bad-bg:#FBE7E7;  --aps-bad-fg:#D63333;

  /* == Accent palette == */
  --aps-blue:#1B56F0;   /* CTAs, links, active, score highlights */
  --aps-navy:#0E1B3A;   /* banners, table headers, nav bar       */
  --aps-gold:#EFA017;   /* star ratings, score badges            */
  --aps-green:#12924A;  /* pros, good scores, win badges         */
  --aps-amber:#B96E00;  /* warnings, average scores              */
  --aps-red:#D63333;    /* cons, risks, bad scores               */
  --aps-oled:#0A0A0A;   /* special OLED hero treatment           */

  /* == Radius == */
  --aps-radius:14px;
  --aps-radius-sm:9px;
  --aps-radius-pill:999px;

  /* == Type scale & roles == */
  --aps-h1:31px; --aps-h2:20px; --aps-h3:16px;
  --aps-body:15px; --aps-small:12px;
  --aps-font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --aps-display:'Space Grotesk',var(--aps-font);
  --aps-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Apply the body face to all APS front-end containers (non-destructive). */
.aps-container,.aps-content,.aps-product-loop,.aps-brand-archive,
.aps-index,.aps-archive,.di{font-family:var(--aps-font)}

/* Headings inside APS areas use the display face. */
.aps-container h1,.aps-container h2,.aps-content h1,.aps-content h2,
.aps-archive-title,.aps-brand-title{font-family:var(--aps-display);letter-spacing:-.01em}

/* Tabular mono for any value/number cells the loop/archive expose. */
.aps-product-pill,.aps-card-score,.aps-spec-value,.aps-key-spec-val{
  font-family:var(--aps-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* == Dark mode == (unchanged behaviour; new neutral darks) */
body.aps-dark{
  --aps-bg:#0E1014;
  --aps-surface:#171A20;
  --aps-border:#2A2F38;
  --aps-t1:#EEF1F5;
  --aps-t2:#AEB6C2;
  --aps-t3:#7E8794;
  --aps-good-bg:#10271A; --aps-good-fg:#5FD08A;
  --aps-warn-bg:#2A1F0E; --aps-warn-fg:#E6B25C;
  --aps-bad-bg:#2A1313;  --aps-bad-fg:#F08A8A;
}
@media (prefers-color-scheme: dark){
  body.aps-auto-dark{
    --aps-bg:#0E1014;
    --aps-surface:#171A20;
    --aps-border:#2A2F38;
    --aps-t1:#EEF1F5;
    --aps-t2:#AEB6C2;
    --aps-t3:#7E8794;
    --aps-good-bg:#10271A; --aps-good-fg:#5FD08A;
    --aps-warn-bg:#2A1F0E; --aps-warn-fg:#E6B25C;
    --aps-bad-bg:#2A1313;  --aps-bad-fg:#F08A8A;
  }
}