/* ============================================================
   kfx-tokens.css — KlinikFX Design Tokens (SUMBER KEBENARAN)
   Rilis: KFX-REL-2026.07.07 · Fase B1
   Palet: NAVY + GOLD — selaras roadmap PROMPT_PERBAIKAN_KLINIKFX.md
   dan kondisi LIVE mtf.html (:root navy #080b12, gold #f3c453,
   Space Grotesk/Manrope).
   CATATAN: KlinikFX_Docs/kfx-theme.css (varian HIJAU/Plus Jakarta)
   TIDAK dipakai — bertentangan dgn roadmap. Lihat RELEASE_PLAN.
   Pasang <link> INI SEBELUM style lain di mtf.html, mtf_addons.html, tv.html.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* ── Latar & permukaan (navy) ── */
  --bg:       #0b1017;   /* rgb(11,16,23) — roadmap: samakan SEMUA halaman ke sini */
  --panel:    #121a28;
  --panel2:   #1b2435;
  --bg2:      #121a28;   /* alias kompatibilitas halaman dashboard */
  --line:     #243044;
  --bdr:      #243044;   /* alias kompatibilitas nama lama */
  --bdrSoft:  #1a2334;

  /* ── Teks (P3 kontras: min 4.5:1 di atas bg gelap) ── */
  --txt:         #e5e7eb;   /* utama  ~15:1 di atas --bg */
  --txt-dim:     #94a3b8;   /* sekunder/info ~6-7:1 (lulus 4.5:1) */
  --txt-disabled:#64748b;   /* HANYA elemen non-informasi (disabled) */
  --muted:    var(--txt-dim);
  --muted2:   var(--txt-dim);
  --dim:      var(--txt-dim);   /* alias */

  /* ── Aksen brand: GOLD (untuk brand/aktif SAJA) ── */
  --accent:   #f3c453;
  --gold:     #f3c453;   /* alias */
  --gold-dim: #9c7a2e;
  --gold-bg:  #2a2008;
  --gold-glow: rgba(243,196,83,.40);
  --gold-soft: rgba(243,196,83,.12);
  --goldDim:  var(--gold-dim);   /* alias kompatibilitas template lama */
  --goldGlow: var(--gold-glow);

  /* ── Semantik arah: HANYA bull/bear/warn/netral ── */
  --bull:     #34d77f;
  --bear:     #ff6f61;
  --warn:     #e0a52a;
  --neu:      var(--txt-dim);   /* netral (gray) — luminansi dinaikkan, makna tetap */
  --bull-fg:  #58d999;  --bull-bg: #0c2a19;
  --bear-fg:  #ff7b86;  --bear-bg: #2b0f13;
  --info:     #4aa3ff;
  --info-bg:  #10283d;
  --surf:     var(--panel);      /* alias dashboard legacy */
  --surf2:    var(--panel2);
  --su-bg:    var(--bull-bg);
  --su-fg:    var(--bull-fg);
  --su-rg:    var(--bull);
  --sd-bg:    var(--bear-bg);
  --sd-fg:    var(--bear-fg);
  --sd-rg:    var(--bear);
  --mx-bg:    var(--gold-bg);
  --mx-fg:    var(--accent);
  --mx-rg:    var(--gold-dim);
  --bon-bg:   var(--gold-bg);
  --bon-fg:   var(--accent);
  --bon-rg:   var(--gold-dim);

  /* Efek permukaan */
  --shadow:   rgba(0,0,0,.35);
  --shadow-soft: rgba(0,0,0,.22);
  --glass:    rgba(18,26,40,.88);
  --overlay:  rgba(8,10,14,.92);
  --tickdur:  90s;

  /* ── Tipografi ── */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', monospace;  /* angka tabel */
  --tf-:      var(--panel2); /* fallback scanner utk template var(--tf-{{...}}-*) */

  /* ── Skala font (WAJIB >= 10px) ── */
  --fs-1: 10px; --fs-2: 12px; --fs-3: 14px; --fs-4: 17px;
  --fs-5: 24px; --fs-6: 34px; --fs-7: 44px;

  /* ── Radius (4/8/12) ── */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  /* ── Spacing ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
}