/* ============================================================
   kfx-tokens.css — KlinikFX Design Tokens (SUMBER KEBENARAN)
   Rilis: KFX-REL-2026.07.07 · Fase B1
   Build-note 2026-07-09 (P6): + blok Aksesibilitas shared di bawah (fokus/motion/tap).
   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;

  /* ── P5 design-system aliases (KONSOLIDASI ke warna eksisting — bukan rebranding) ──
     Nilai target di brief dipetakan ke hex eksisting terdekat (AUDIT.md), agar
     tampilan lama tetap dikenali. Token teks (--txt/--txt-dim/--bg/--warn/--info)
     SUDAH ADA di atas — tidak diduplikasi. */
  --up:        var(--bull);     /* naik   #34d77f (target brief #22c55e) */
  --down:      var(--bear);     /* turun  #ff6f61 (target #ef4444) */
  --abstain:   var(--bear);     /* ABSTAIN = merah; [ACC?] owner boleh pisah ke rose #f43f5e */
  --neutral:   var(--neu);      /* sideways/netral #94a3b8 (target #64748b) */
  --card:       var(--panel);   /* #121a28 (target #111827) */
  --card-raise: var(--panel2);  /* #1b2435 (target #1a2332) */
  --border:     var(--bdr);     /* #243044 (target #263244) */
  --fs-data:    12px;           /* angka data (= --fs-2) */
  --fs-body:    14px;           /* teks isi   (= --fs-3) */
  --fs-verdict: 28px;           /* verdict besar */

  /* ── 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;

  /* ── P6 · Aksesibilitas (shared) ── */
  --kfx-focus:      #7ab8ff;   /* ring fokus: kontras tinggi di atas navy & di gap offset */
  --kfx-focus-halo: #0b1017;   /* halo gelap: pemisah utk elemen berlatar emas/terang */
  --kfx-tap-min:    44px;      /* WCAG 2.5.5 target sentuh */
}

/* ============================================================
   P6 · AKSESIBILITAS — SHARED (mtf.html · mtf_addons.html · tv.html)
   Build-note 2026-07-09 · WCAG 2.1 AA. Reversible: hapus blok P6 ini.
   1) Fokus terlihat  2) prefers-reduced-motion  3) util target sentuh + sr-only
   ============================================================ */

/* 1 · Fokus terlihat — 3px ring + offset + halo; override inline outline:none */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 3px solid var(--kfx-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--kfx-focus-halo) !important;
  border-radius: 6px;
  position: relative;
  z-index: 6;
}
/* Fallback mesin lama tanpa dukungan :focus-visible */
@supports not selector(:focus-visible){
  a:focus, button:focus, [role="button"]:focus, [role="tab"]:focus,
  [tabindex]:not([tabindex="-1"]):focus, input:focus, select:focus, textarea:focus{
    outline: 3px solid var(--kfx-focus) !important;
    outline-offset: 3px !important;
  }
}

/* 2 · prefers-reduced-motion — matikan animasi popup/marquee + transisi view */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  #ticker .inner{ animation: none !important; transform: none !important; }
}

/* 3 · Util aksesibilitas */
.kfx-sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.kfx-tap-44{ min-width: var(--kfx-tap-min); min-height: var(--kfx-tap-min); }
.kfx-tap-pad{
  min-width: var(--kfx-tap-min); min-height: var(--kfx-tap-min);
  display: inline-flex; align-items: center; justify-content: center;
}

/* 4 · Target sentuh >=44px utk kontrol mtf.html / mtf_addons.html
   (selektor ber-namespace kfx-*; TIDAK match apa pun di tv.html → no-op di sana) */
.kfx-control-strip button,
.kfx-source-compact a{
  min-width: var(--kfx-tap-min) !important;
  min-height: var(--kfx-tap-min) !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}
.kfx-quick-toolbar a[data-kfx-view],
.kfx-quick-toolbar a[data-kfx-asset],
.kfx-quick-toolbar a[data-kfx-filter],
.kfx-quick-toolbar a[data-kfx-sort],
.kfx-quick-toolbar button,
.kfx-xau-toggle{
  min-height: var(--kfx-tap-min) !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}

/* ============================================================
   RFC-024 · product_ui_a11y_v1
   Canonical default OFF. The committed production-on flag adds
   html.kfx-ui-a11y-v1 so these rules remain reversible.
   ============================================================ */
html.kfx-ui-a11y-v1 .kfx-quick-toolbar > a{
  min-width:var(--kfx-tap-min) !important;
  min-height:var(--kfx-tap-min) !important;
  display:inline-flex !important;
  align-items:center; justify-content:center;
}
@media (max-width:1100px){
  html.kfx-ui-a11y-v1,
  html.kfx-ui-a11y-v1 body{
    width:100%; max-width:100%; overflow-x:clip;
  }
  html.kfx-ui-a11y-v1 header{
    width:100%; max-width:100%; min-width:0; overflow-x:clip;
  }
  html.kfx-ui-a11y-v1 nav.kfx-sc{
    width:100%; max-width:100%; min-width:0;
    overflow-x:auto !important; overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  html.kfx-ui-a11y-v1 nav.kfx-sc::-webkit-scrollbar{display:none}
  html.kfx-ui-a11y-v1 nav.kfx-sc > [data-kfx-nav]{
    width:auto; max-width:none; overflow:visible; flex:0 0 auto;
  }
  html.kfx-ui-a11y-v1 .kfx-shared-nav-wrap{max-width:none}
  html.kfx-ui-a11y-v1 .kfx-health button{
    min-height:var(--kfx-tap-min) !important;
    padding:8px 0 !important;
  }
  html.kfx-ui-a11y-v1 .kfx-xau-toggle{
    min-height:var(--kfx-tap-min) !important;
  }
  html.kfx-ui-a11y-v1 .kfx-quick-toolbar a[data-kfx-view],
  html.kfx-ui-a11y-v1 .kfx-quick-toolbar a[data-kfx-asset],
  html.kfx-ui-a11y-v1 .kfx-quick-toolbar a[data-kfx-filter],
  html.kfx-ui-a11y-v1 .kfx-quick-toolbar a[data-kfx-sort],
  html.kfx-ui-a11y-v1 .kfx-quick-toolbar > a,
  html.kfx-ui-a11y-v1 .kfx-sort-strip a,
  html.kfx-ui-a11y-v1 .kfx-sort-strip button,
  html.kfx-ui-a11y-v1 .kfx-view-strip button,
  html.kfx-ui-a11y-v1 .kfx-filter-strip button{
    min-width:var(--kfx-tap-min) !important;
    min-height:var(--kfx-tap-min) !important;
    display:inline-flex !important;
    align-items:center; justify-content:center;
  }
}