/* ==========================================================================
   TOKEN. Tiga skin x dua mode. Satu-satunya tempat warna didefinisikan.

   Aturan yang gak boleh dilanggar:
   - nol coklat di dark, dark selalu cool graphite
   - nol hitam pekat (#000) dan nol putih pekat (#fff) sebagai stock
   - satu aksen sinyal per skin, cuma di tempat mata harus berhenti

   Skin di-set di <html data-skin="...">, mode di <html data-theme="...">.
   ========================================================================== */

/* ---------------------------------------------------------------- SKIN A
   Field Ledger: buku besar lapangan. Garis tipis, angka tabular,
   brass di terang, teal dingin di gelap. Default. */
:root,
[data-skin="ledger"] {
  --font-display: "Newsreader", Georgia, serif;
  --font-ui: "Archivo Narrow", "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 3px;
  --radius-sm: 2px;
  --rule-w: 1px;
  --ledger-rule: 1;
}

[data-skin="ledger"][data-theme="light"] {
  --paper: #f6f1e8;
  --paper-2: #ece5d8;
  --card: #fffdf8;
  --ink: #1b1917;
  --ink-2: #57514a;
  --ink-3: #8a8378;
  --rule: #e2dacb;
  --rule-2: #cfc5b3;
  --acc: #9a6b2f;
  --acc-soft: #f0e4cf;
  --acc-ink: #6b4818;
  --brass: #96631c;
  --cool: #1f6155;
  --ok: #1f6155;
  --warn: #96631c;
  --crit: #b0342a;
  --muted: #6f6a62;
  --shadow: 0 1px 0 rgba(27, 25, 23, .04), 0 8px 20px -14px rgba(27, 25, 23, .35);
  --ring: 0 0 0 2px rgba(154, 107, 47, .35);
  --zebra: rgba(27, 25, 23, .022);
}

[data-skin="ledger"][data-theme="dark"] {
  --paper: #0b0f14;
  --paper-2: #11171e;
  --card: #0f151c;
  --ink: #e8eff5;
  --ink-2: #9fb0bf;
  --ink-3: #66798a;
  --rule: #1b242d;
  --rule-2: #26333e;
  --acc: #4fd1c5;
  --acc-soft: #12312f;
  --acc-ink: #a8ece4;
  --brass: #ffc247;
  --cool: #4fd1c5;
  --ok: #3ddc97;
  --warn: #ffc247;
  --crit: #ff5a5f;
  --muted: #66798a;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3);
  --ring: 0 0 0 2px rgba(79, 209, 197, .35);
  --zebra: rgba(232, 239, 245, .028);
}

/* ---------------------------------------------------------------- SKIN B
   Dossier: map manila, cap karet, kertas arsip. Cap merah jadi sinyal. */
[data-skin="dossier"] {
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 2px;
  --radius-sm: 2px;
  --rule-w: 1px;
  --ledger-rule: 0;
}

[data-skin="dossier"][data-theme="light"] {
  --paper: #f7f4ee;
  --paper-2: #efe9dd;
  --card: #fffefb;
  --ink: #201d1a;
  --ink-2: #5c554c;
  --ink-3: #8d8478;
  --rule: #e4ddd0;
  --rule-2: #d2c8b6;
  --acc: #b0342a;
  --acc-soft: #f6dedb;
  --acc-ink: #8a251d;
  --brass: #8a6420;
  --cool: #2c5f6f;
  --ok: #2c6b4f;
  --warn: #96631c;
  --crit: #b0342a;
  --muted: #6f6a62;
  --shadow: 0 1px 0 rgba(32, 29, 26, .05), 0 10px 24px -18px rgba(32, 29, 26, .4);
  --ring: 0 0 0 2px rgba(176, 52, 42, .3);
  --zebra: rgba(32, 29, 26, .024);
}

[data-skin="dossier"][data-theme="dark"] {
  --paper: #101013;
  --paper-2: #17171b;
  --card: #16161a;
  --ink: #eceff3;
  --ink-2: #a3a9b4;
  --ink-3: #6b7280;
  --rule: #23232a;
  --rule-2: #2f2f38;
  --acc: #ff5a5f;
  --acc-soft: #35191c;
  --acc-ink: #ffb3b6;
  --brass: #ffc247;
  --cool: #6fd3e0;
  --ok: #3ddc97;
  --warn: #ffc247;
  --crit: #ff5a5f;
  --muted: #6b7280;
  --shadow: 0 1px 0 rgba(0, 0, 0, .35);
  --ring: 0 0 0 2px rgba(255, 90, 95, .3);
  --zebra: rgba(236, 239, 243, .03);
}

/* ---------------------------------------------------------------- SKIN C
   Signal Board: papan operator. Blok status besar, bar tipis, cyan. */
[data-skin="signal"] {
  --font-display: "Instrument Serif", Georgia, serif;
  --font-ui: "IBM Plex Mono", ui-monospace, monospace;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 0px;
  --radius-sm: 0px;
  --rule-w: 1px;
  --ledger-rule: 0;
}

[data-skin="signal"][data-theme="light"] {
  --paper: #f4f6f6;
  --paper-2: #e9eded;
  --card: #ffffff;
  --ink: #101617;
  --ink-2: #4b5759;
  --ink-3: #7d8b8d;
  --rule: #dde3e3;
  --rule-2: #c8d2d2;
  --acc: #0e7f8c;
  --acc-soft: #d8eef0;
  --acc-ink: #0a5f69;
  --brass: #8a6420;
  --cool: #0e7f8c;
  --ok: #1c6b52;
  --warn: #8a6420;
  --crit: #a52a30;
  --muted: #6d7a7c;
  --shadow: none;
  --ring: 0 0 0 2px rgba(14, 127, 140, .3);
  --zebra: rgba(16, 22, 23, .02);
}

[data-skin="signal"][data-theme="dark"] {
  --paper: #0a0e11;
  --paper-2: #0f1519;
  --card: #0e1418;
  --ink: #e6eef0;
  --ink-2: #97a7ab;
  --ink-3: #617074;
  --rule: #1a2227;
  --rule-2: #243036;
  --acc: #35d0e0;
  --acc-soft: #0c2b30;
  --acc-ink: #9ceaf3;
  --brass: #ffc247;
  --cool: #35d0e0;
  --ok: #38d99a;
  --warn: #ffc247;
  --crit: #ff5f66;
  --muted: #617074;
  --shadow: none;
  --ring: 0 0 0 2px rgba(53, 208, 224, .3);
  --zebra: rgba(230, 238, 240, .03);
}

/* ------------------------------------------------------------ TONE STATUS
   Dipakai badge dan baris tabel. Satu tempat, ikut tema. */
:root {
  --tone-info: var(--acc);
  --tone-ok: var(--ok);
  --tone-muted: var(--ink-3);
  --tone-gold: var(--brass);
  --tone-warn: var(--warn);
  --tone-crit: var(--crit);
  --maxw: 1240px;
  --gap: 14px;
  --pad: 16px;
}