/* ===== Portal 3.0 card styles: colour tokens for Ledger, Signal and Afterburn =====
   Always loaded (no fonts here). card-style.js sets <html data-card-style="...">; the Settings preview
   swatches carry the same attribute, so they paint from these exact tokens.
   Dark is the portal default; light covers [data-theme="light"] and [data-theme="girly"] (Rose).
   Every block defines every colour token as #rrggbb (or var(--cs-...) of one) so
   tests/test_card_styles_contrast.py can check WCAG AA on all six sets. Fonts and the per-style
   flourishes live in ledger.css / signal.css / afterburn.css (enabled only for the active style). */

/* ---------- Ledger: warm editorial (paper, ink, ember) ---------- */
[data-card-style="ledger"]{
  --cs-card:#211c16;--cs-card-2:#2a231b;--cs-field:#1b1712;--cs-btn:#211c16;--cs-track:#352c22;
  --cs-ink:#f3ebdd;--cs-muted:#bfae96;--cs-line:#3a3128;--cs-ls:#8a7761;
  --cs-acc:#ff8a5c;--cs-acc-h:#ffa07a;--cs-on-acc:#1d0d05;--cs-acc-t:#ff8a5c;
  --cs-acc2:#7cc6e8;--cs-on-acc2:#0b1a22;--cs-acc-soft:#3a2318;--cs-focus:#7cc6e8;--cs-ok:#8fd19e;
  --cs-bad:#ff8f80;--cs-on-bad:#1d0503;
  --cs-chip-bg:var(--cs-card);--cs-chip-ink:var(--cs-ink);--cs-rec-bg:var(--cs-card);--cs-rec-ink:var(--cs-acc-t);
  --cs-go-a:var(--cs-acc);--cs-go-b:var(--cs-acc);--cs-on-go:var(--cs-on-acc);
  --cs-r:6px;--cs-rs:4px;--cs-rb:4px;
  --cs-shadow:0 1px 0 #2e261e,0 18px 34px -22px rgba(0,0,0,.8);
  --cs-tray-shadow:0 24px 48px -16px rgba(0,0,0,.85);
}
:root[data-theme="light"] [data-card-style="ledger"],:root[data-theme="light"][data-card-style="ledger"],
:root[data-theme="girly"] [data-card-style="ledger"],:root[data-theme="girly"][data-card-style="ledger"]{
  --cs-card:#fffcf6;--cs-card-2:#f7f0e3;--cs-field:#fffefb;--cs-btn:#fffcf6;--cs-track:#ece2d1;
  --cs-ink:#221b14;--cs-muted:#66574a;--cs-line:#e6dccb;--cs-ls:#94826b;
  --cs-acc:#b3360a;--cs-acc-h:#962c07;--cs-on-acc:#ffffff;--cs-acc-t:#b3360a;
  --cs-acc2:#1f6587;--cs-on-acc2:#ffffff;--cs-acc-soft:#fbe9dc;--cs-focus:#1f6587;--cs-ok:#2f6b3a;
  --cs-bad:#b42318;--cs-on-bad:#ffffff;
  --cs-chip-bg:var(--cs-card);--cs-chip-ink:var(--cs-ink);--cs-rec-bg:var(--cs-card);--cs-rec-ink:var(--cs-acc-t);
  --cs-go-a:var(--cs-acc);--cs-go-b:var(--cs-acc);--cs-on-go:var(--cs-on-acc);
  --cs-shadow:0 1px 0 #e6dccb,0 14px 30px -22px rgba(70,45,20,.45);
  --cs-tray-shadow:0 2px 0 #e6dccb,0 24px 48px -20px rgba(70,45,20,.45);
}

/* ---------- Signal: crisp product UI (cool greys, brand blue) ---------- */
[data-card-style="signal"]{
  --cs-card:#121a24;--cs-card-2:#0f161f;--cs-field:#0d141c;--cs-btn:#17212d;--cs-track:#1d2835;
  --cs-ink:#e7edf4;--cs-muted:#98a6b8;--cs-line:#1f2b38;--cs-ls:#62758c;
  --cs-acc:#3db8f5;--cs-acc-h:#6ccaf8;--cs-on-acc:#04131c;--cs-acc-t:#5cc4f5;
  --cs-acc2:#5cc4f5;--cs-on-acc2:#04131c;--cs-acc-soft:#0f2a3a;--cs-focus:#6ccaf8;--cs-ok:#5ad48a;
  --cs-bad:#f87171;--cs-on-bad:#1a0505;
  --cs-chip-bg:var(--cs-acc-soft);--cs-chip-ink:var(--cs-acc2);--cs-rec-bg:var(--cs-acc-soft);--cs-rec-ink:var(--cs-acc-t);
  --cs-go-a:var(--cs-acc);--cs-go-b:var(--cs-acc);--cs-on-go:var(--cs-on-acc);
  --cs-r:12px;--cs-rs:8px;--cs-rb:8px;
  --cs-shadow:0 0 0 1px rgba(255,255,255,.02),0 1px 2px rgba(0,0,0,.5),0 10px 24px -12px rgba(0,0,0,.7);
  --cs-tray-shadow:0 22px 50px -12px rgba(0,0,0,.85);
}
:root[data-theme="light"] [data-card-style="signal"],:root[data-theme="light"][data-card-style="signal"],
:root[data-theme="girly"] [data-card-style="signal"],:root[data-theme="girly"][data-card-style="signal"]{
  --cs-card:#ffffff;--cs-card-2:#f6f8fa;--cs-field:#ffffff;--cs-btn:#ffffff;--cs-track:#e6ebf1;
  --cs-ink:#0e1621;--cs-muted:#4f5d6e;--cs-line:#e3e8ee;--cs-ls:#7f8c9d;
  --cs-acc:#1a6a8f;--cs-acc-h:#155a7a;--cs-on-acc:#ffffff;--cs-acc-t:#1a6a8f;
  --cs-acc2:#1a6a8f;--cs-on-acc2:#ffffff;--cs-acc-soft:#e5f1f7;--cs-focus:#1f7aa6;--cs-ok:#12703f;
  --cs-bad:#b42318;--cs-on-bad:#ffffff;
  --cs-chip-bg:var(--cs-acc-soft);--cs-chip-ink:var(--cs-acc2);--cs-rec-bg:var(--cs-acc-soft);--cs-rec-ink:var(--cs-acc-t);
  --cs-go-a:var(--cs-acc);--cs-go-b:var(--cs-acc);--cs-on-go:var(--cs-on-acc);
  --cs-shadow:0 0 0 1px rgba(14,22,33,.02),0 1px 2px rgba(14,22,33,.06),0 6px 16px -8px rgba(14,22,33,.12);
  --cs-tray-shadow:0 1px 2px rgba(14,22,33,.08),0 18px 44px -12px rgba(14,22,33,.28);
}

/* ---------- Afterburn: bold, dark first (brand blue #2a93c1 + orange #f1420b) ---------- */
[data-card-style="afterburn"]{
  --cs-card:#0e1422;--cs-card-2:#121a2c;--cs-field:#0a0f1b;--cs-btn:#121a2c;--cs-track:#18213a;
  --cs-ink:#f1f5fb;--cs-muted:#9aabc2;--cs-line:#1e2a40;--cs-ls:#62789c;
  --cs-acc:#ff6a3d;--cs-acc-h:#ff8a63;--cs-on-acc:#160600;--cs-acc-t:#ff8a63;
  --cs-acc2:#3db8f5;--cs-on-acc2:#04131c;--cs-acc-soft:#10263a;--cs-focus:#3db8f5;--cs-ok:#4ade80;
  --cs-bad:#f87171;--cs-on-bad:#1a0505;
  --cs-chip-bg:var(--cs-card);--cs-chip-ink:var(--cs-acc2);--cs-rec-bg:var(--cs-acc);--cs-rec-ink:var(--cs-on-acc);
  --cs-go-a:#ff8a5c;--cs-go-b:#f1420b;--cs-on-go:#160600;
  --cs-edge1:#2a93c1;--cs-edge2:#f1420b;
  --cs-r:18px;--cs-rs:12px;--cs-rb:999px;
  --cs-shadow:0 0 0 1px rgba(61,184,245,.05),0 20px 40px -24px rgba(0,0,0,.9),0 0 40px -20px rgba(42,147,193,.35);
  --cs-tray-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 50px -16px rgba(241,66,11,.35);
}
:root[data-theme="light"] [data-card-style="afterburn"],:root[data-theme="light"][data-card-style="afterburn"],
:root[data-theme="girly"] [data-card-style="afterburn"],:root[data-theme="girly"][data-card-style="afterburn"]{
  --cs-card:#ffffff;--cs-card-2:#f2f5fa;--cs-field:#ffffff;--cs-btn:#ffffff;--cs-track:#e1e7f0;
  --cs-ink:#0a0e1a;--cs-muted:#4a5568;--cs-line:#d9e0ea;--cs-ls:#7a879a;
  --cs-acc:#c43a0c;--cs-acc-h:#a83109;--cs-on-acc:#ffffff;--cs-acc-t:#c43a0c;
  --cs-acc2:#1a6a8f;--cs-on-acc2:#ffffff;--cs-acc-soft:#e4f0f7;--cs-focus:#1a6a8f;--cs-ok:#157a3f;
  --cs-bad:#b42318;--cs-on-bad:#ffffff;
  --cs-chip-bg:var(--cs-card);--cs-chip-ink:var(--cs-acc2);--cs-rec-bg:var(--cs-acc);--cs-rec-ink:var(--cs-on-acc);
  --cs-go-a:var(--cs-acc);--cs-go-b:var(--cs-acc);--cs-on-go:var(--cs-on-acc);
  --cs-shadow:0 1px 2px rgba(10,14,26,.06),0 18px 36px -22px rgba(10,14,26,.35);
  --cs-tray-shadow:0 24px 50px -18px rgba(10,14,26,.4);
}