/* ═══════════════════════════════════════════════════════════════════════
   MEMBER · TOKEN DESAIN (satu-satunya tempat warna & ukuran dasar didefinisikan)
   ═══════════════════════════════════════════════════════════════════════
   Sumber nilai: redesign "Setra v2" (tim desain). Berlaku untuk SEMUA halaman member.

   ATURAN:
   - Setiap token didefinisikan TEPAT SATU KALI di sini (terang di :root, gelap di body.tema-gelap).
   - CSS lain hanya MEMAKAI token (var(--st-...)), tidak mendefinisikan ulang. Mau ganti warna? Ubah di sini.
   - Gelap aktif bila <body> punya kelas .tema-gelap (skrip di <head> membaca localStorage 'setra-tema').
   - Nama lama (--st-*, --bv-*) dipertahankan agar halaman yang belum dimigrasikan ikut berganti palet
     tanpa disunting. Nama baru yang bermakna ada di bagian "Semantik v2".
   Peta berkas & urutan muat: docs/member-v2.md.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── TERANG (bawaan) ───────── */
:root{
  /* Semantik v2 */
  --v2-bg:#f8f5ed;          /* latar halaman */
  --v2-panel:#fffdf8;       /* kartu, panel */
  --v2-text:#30452b;        /* teks utama */
  --v2-muted:#72745f;       /* teks sekunder */
  --v2-line:#e7e7d7;        /* garis tipis */
  --v2-accent:#596f2b;      /* aksen/hijau Setra */
  --v2-accent-soft:#edf0db; /* latar lembut aksen */
  --v2-down:#aa6557;        /* negatif/peringatan */

  /* Nama lama → dipetakan ke palet v2 (dipakai ratusan aturan di CSS halaman) */
  --st-page:var(--v2-bg);
  --st-surface:var(--v2-panel);
  --st-panel:var(--v2-panel);
  --st-panel-2:#f1ecdf;
  --st-hair:var(--v2-line);
  --st-hair-2:#d6d6c2;
  --st-ink:var(--v2-text);
  --st-ink-2:#4a5e44;
  --st-ink-3:var(--v2-muted);
  --st-muted:var(--v2-muted);
  --st-accent:var(--v2-accent);
  --st-accent-soft:var(--v2-accent-soft);
  --st-up:#4f7a28;
  --st-up-soft:rgba(79,122,40,.12);
  --st-down:var(--v2-down);
  --st-on-accent:#fffdf3;   /* teks di atas warna aksen (tombol) */
  --st-down-soft:rgba(170,101,87,.13);
  --st-warn:#8a6a1c;
  --st-warn-soft:rgba(138,106,28,.13);
  --st-scroll:#cfcfba;

  /* Sidebar desktop */
  --st-side-bg:#f1f2e6;
  --st-side-line:#dfe4d0;
  --st-side-on-bg:#e1e8ce;
  --st-side-on-ink:#536e30;
  --st-deep:#3e5a2e;        /* hijau olive tua: tombol/lambang pekat */

  /* Kartu sorot Beranda (hero maskot) */
  --st-hero-bg:#faf3e9;
  --st-hero-ink:#34462c;
  --st-hero-muted:#74755e;

  /* Bentuk & font */
  --st-r:12px;
  --st-r-lg:18px;
  --st-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --st-font:ui-rounded,"SF Pro Rounded","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Keluarga --bv-* (dulu hanya di .tema-hijau) */
  --bv-hutan:var(--v2-text);
  --bv-hijau:var(--v2-accent);
  --bv-hijau-tua:#46581f;
  --bv-mint:#a9c46b;
  --bv-lime:#c1d783;
  --bv-teal:#5f7f4a;
  --bv-hijau-soft:var(--v2-accent-soft);
  --bv-teal-soft:rgba(95,127,74,.12);
  --bv-lime-soft:rgba(193,215,131,.28);
  --bv-warn-soft:var(--st-warn-soft);
  --bv-kertas:var(--v2-panel);
  --bv-bayang:0 1px 2px rgba(48,69,43,.05),0 6px 20px rgba(48,69,43,.06);
  --bv-bayang-kuat:0 2px 6px rgba(48,69,43,.07),0 14px 34px rgba(48,69,43,.1);

  /* Ukuran shell (diubah skrip mode ringkas lewat html[data-member-compact]) */
  --st-desktop-width:224px;
}
:root[data-member-compact="1"]{--st-desktop-width:76px}

/* ───────── GELAP ───────── */
/* Catatan: var() di custom property dihitung di elemen tempat ia didefinisikan, jadi blok gelap
   WAJIB mendefinisikan ulang semua token turunan (bukan hanya --v2-*). html[data-theme="dark"]
   dipakai halaman luar (/chart, /terminal-trading) yang tidak memberi kelas pada body. */
body.tema-gelap,
html[data-theme="dark"]{
  --v2-bg:#19221b;
  --v2-panel:#222e23;
  --v2-text:#eef1df;
  --v2-muted:#b3b9a1;
  --v2-line:#3c4735;
  --v2-accent:#c1d783;
  --v2-accent-soft:#354126;
  --v2-down:#e6a48e;

  --st-page:var(--v2-bg);
  --st-surface:var(--v2-panel);
  --st-panel:var(--v2-panel);
  --st-hair:var(--v2-line);
  --st-ink:var(--v2-text);
  --st-ink-3:var(--v2-muted);
  --st-muted:var(--v2-muted);
  --st-accent:var(--v2-accent);
  --st-accent-soft:var(--v2-accent-soft);
  --st-down:var(--v2-down);
  --bv-hutan:var(--v2-text);
  --bv-hijau:var(--v2-accent);
  --bv-hijau-soft:var(--v2-accent-soft);
  --bv-kertas:var(--v2-panel);
  --st-panel-2:#2a382b;
  --st-hair-2:#4d5a44;
  --st-ink-2:#d3d9c0;
  --st-up:#9fd26a;
  --st-up-soft:rgba(159,210,106,.15);
  --st-down-soft:rgba(230,164,142,.15);
  --st-warn:#e0b860;
  --st-warn-soft:rgba(224,184,96,.15);
  --st-on-accent:#1f2a14;
  --st-side-bg:#1f2a20;
  --st-side-line:#3c4735;
  --st-side-on-bg:#354126;
  --st-side-on-ink:#c1d783;
  --st-deep:#2f4a2b;
  --st-hero-bg:#2b3a2a;
  --st-hero-ink:#eef1df;
  --st-hero-muted:#b3b9a1;
  --bv-warn-soft:var(--st-warn-soft);
  --st-scroll:#4d5a44;

  --bv-hijau-tua:#d8e8a6;
  --bv-mint:#a9c46b;
  --bv-teal:#8fb27a;
  --bv-teal-soft:rgba(143,178,122,.14);
  --bv-lime-soft:rgba(193,215,131,.14);
  --bv-bayang:0 1px 2px rgba(0,0,0,.4);
  --bv-bayang-kuat:0 2px 6px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.4);

  color-scheme:dark;
}