/* ====
   APS Design Tokens — DisplayInput theme palette (blue accent, white cards, system fonts)
   Single shared source of truth. Same variable names as before, so
   every existing component (archive, loop cards, revamp widgets)
   adopts the new look automatically. Soft grey page, white cards, system
   fonts, theme-blue accent.
   ==== */

:root{
  /* Surfaces & text (theme palette) */
  --aps-bg:#f5f7fa;
  --aps-surface:#ffffff;
  --aps-border:#e2e8f0;
  --aps-t1:#1e293b;
  --aps-t2:#475569;
  --aps-t3:#64748b;

  /* Semantic pairs */
  --aps-good-bg:#e7f6ec; --aps-good-fg:#15803d;
  --aps-warn-bg:#fef3c7; --aps-warn-fg:#92400e;
  --aps-bad-bg:#fee2e2;  --aps-bad-fg:#b91c1c;

  /* Accent palette */
  --aps-blue:#0170b9;
  --aps-navy:#1e293b;
  --aps-gold:#b98a17;
  --aps-green:#15803d;
  --aps-amber:#92400e;
  --aps-red:#b91c1c;
  --aps-oled:#1e293b;

  /* Radius */
  --aps-radius:10px;
  --aps-radius-sm:6px;
  --aps-radius-pill:999px;

  /* Type scale & roles (system fonts, no downloads) */
  --aps-h1:30px; --aps-h2:19px; --aps-h3:15px;
  --aps-body:14px; --aps-small:11.5px;
  --aps-font:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --aps-display:var(--aps-font);
  --aps-mono:var(--aps-font);
}

/* 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:#1e293b;
  --aps-surface:#1e293b;
  --aps-border:#1e293b;
  --aps-t1:#edf2f7;
  --aps-t2:#64748b;
  --aps-t3:#64748b;
  --aps-good-bg:#14301d; --aps-good-fg:#15803d;
  --aps-warn-bg:#2d2410; --aps-warn-fg:#92400e;
  --aps-bad-bg:#301717;  --aps-bad-fg:#fee2e2;
}
@media (prefers-color-scheme: dark){
  body.aps-auto-dark{
    --aps-bg:#1e293b;
    --aps-surface:#1e293b;
    --aps-border:#1e293b;
    --aps-t1:#edf2f7;
    --aps-t2:#64748b;
    --aps-t3:#64748b;
    --aps-good-bg:#14301d; --aps-good-fg:#15803d;
    --aps-warn-bg:#2d2410; --aps-warn-fg:#92400e;
    --aps-bad-bg:#301717;  --aps-bad-fg:#fee2e2;
  }
}