/* ====
   APS Design Tokens — "Editorial Datasheet" (DisplayInput redesign v2)
   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 paper base, Archivo +
   IBM Plex Mono type, hard rules, steel-blue accent.
   ==== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
  /* == Surfaces & text (warm paper base) == */
  --aps-bg:#f7f7f4;
  --aps-surface:#fdfdfb;
  --aps-border:#cfd1d5;
  --aps-t1:#171b20;
  --aps-t2:#4f5359;
  --aps-t3:#7d8086;

  /* == Semantic pairs == */
  --aps-good-bg:#ddf4e1; --aps-good-fg:#21763c;
  --aps-warn-bg:#f6ecd4; --aps-warn-fg:#8a6410;
  --aps-bad-bg:#f7e3e3;  --aps-bad-fg:#a33636;

  /* == Accent palette == */
  --aps-blue:#176490;   /* CTAs, links, active, score highlights */
  --aps-navy:#171b20;   /* banners, table headers, nav bar       */
  --aps-gold:#b98a17;   /* star ratings, score badges            */
  --aps-green:#21763c;  /* pros, good scores, win badges         */
  --aps-amber:#8a6410;  /* warnings, average scores              */
  --aps-red:#a33636;    /* cons, risks, bad scores               */
  --aps-oled:#171b20;   /* special OLED hero treatment           */

  /* == Radius (hard-edged editorial system) == */
  --aps-radius:0px;
  --aps-radius-sm:3px;
  --aps-radius-pill:999px;

  /* == Type scale & roles == */
  --aps-h1:30px; --aps-h2:19px; --aps-h3:15px;
  --aps-body:14px; --aps-small:11.5px;
  --aps-font:'Archivo',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --aps-display:'Archivo',var(--aps-font);
  --aps-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@supports (color: oklch(50% 0.1 200)){
  :root{
    --aps-bg:oklch(97.5% 0.004 95);
    --aps-surface:oklch(99.3% 0.002 95);
    --aps-border:oklch(86% 0.006 260);
    --aps-t1:oklch(22% 0.012 260);
    --aps-t2:oklch(44% 0.012 260);
    --aps-t3:oklch(60% 0.01 260);
    --aps-good-bg:oklch(94.5% 0.035 150); --aps-good-fg:oklch(50% 0.12 150);
    --aps-blue:oklch(48% 0.1 240);
    --aps-navy:oklch(22% 0.012 260);
    --aps-green:oklch(50% 0.12 150);
  }
}

/* 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:-.02em;font-weight:700}

/* 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:#171b20;
  --aps-surface:#171b20;
  --aps-border:#171b20;
  --aps-t1:#dfe1e5;
  --aps-t2:#7d8086;
  --aps-t3:#7d8086;
  --aps-good-bg:#14301d; --aps-good-fg:#21763c;
  --aps-warn-bg:#2d2410; --aps-warn-fg:#8a6410;
  --aps-bad-bg:#301717;  --aps-bad-fg:#f7e3e3;
}
@media (prefers-color-scheme: dark){
  body.aps-auto-dark{
    --aps-bg:#171b20;
    --aps-surface:#171b20;
    --aps-border:#171b20;
    --aps-t1:#dfe1e5;
    --aps-t2:#7d8086;
    --aps-t3:#7d8086;
    --aps-good-bg:#14301d; --aps-good-fg:#21763c;
    --aps-warn-bg:#2d2410; --aps-warn-fg:#8a6410;
    --aps-bad-bg:#301717;  --aps-bad-fg:#f7e3e3;
  }
}