/* public/tema.css — Design tokens MINIFIX (Teal/Cyan Profesional) */
:root{
  /* Dark (lalai) */
  /* Latar belakang lapisan (bg=terluar, bg2/bg3=lapisan atas, panel/panel2=kad/borang) */
  --bg:#050B14;--bg2:#0A1220;--bg3:#16233A;--panel:#0F1A2B;--panel2:#132238;
  /* Garis sempadan/pembahagi (line=biasa, line2=lebih terang utk fokus/hover) */
  --line:#1E3A57;--line2:#264B6E;
  /* Warna teks (teks=utama, teks2=sekunder/label, teks3=paling pudar/hint) */
  --teks:#E6F1FF;--teks2:#8FA9C4;--teks3:#5B7799;
  /* Warna jenama & aksi utama (cyan=aksen jenama, primary=butang/pautan utama) */
  --cyan:#22D3EE;--cyan2:#06B6D4;--primary:#0E7490;--on-primary:#F8FAFC;--on-accent:#03121B;
  /* Warna status/semantik (hijau/success=lulus, kuning=amaran, merah/danger=ralat, dsb) */
  --biru:#3B82F6;--hijau:#34D399;--success:#16A34A;--kuning:#FBBF24;
  --accent:#F59E0B;--oren:#FB923C;--merah:#F87171;--danger:#DC2626;--ungu:#A78BFA;
  /* Radius sudut (r=kad/butang biasa, r2=lebih besar utk modal/panel) & tempoh transisi (pantas/sedang) */
  --r:12px;--r2:16px;--pantas:.16s cubic-bezier(.4,0,.2,1);--sedang:.28s cubic-bezier(.4,0,.2,1);
  /* Fasa 70g — token teks selamat kontras (guna atas latar polos/tint, BUKAN chip pekat) */
  --txt-biru:var(--biru);--txt-ungu:var(--ungu);--txt-kuning:var(--kuning);--txt-cyan:var(--cyan);
  --txt-oren:var(--oren);--txt-hijau:var(--hijau);--txt-merah:var(--merah);--txt-neutral:var(--teks2);
  /* Token chip/badge — tema GELAP.
     Dulu: tint 15% LUTSINAR + teks warna tepu. Dua masalah dilaporkan
     pengguna: (a) tint 15% hampir hilang di atas panel gelap, jadi pil
     tidak kelihatan sbg pil; (b) warna tepu spt --teks2/--oren di atas
     latar gelap tidak cukup kontras utk dibaca sekali imbas.
     Sekarang: latar LEGAP (dicampur dgn --bg, bukan transparent) supaya
     ia konsisten di atas mana-mana permukaan, + teks DICERAHKAN ke arah
     putih. Sasaran kontras >= 7:1. */
  --bdg-biru-bg:color-mix(in srgb, var(--biru) 22%, var(--bg));
  --bdg-biru-fg:color-mix(in srgb, var(--biru) 60%, #FFFFFF);
  --bdg-ungu-bg:color-mix(in srgb, var(--ungu) 22%, var(--bg));
  --bdg-ungu-fg:color-mix(in srgb, var(--ungu) 70%, #FFFFFF);
  --bdg-kuning-bg:color-mix(in srgb, var(--kuning) 22%, var(--bg));
  --bdg-kuning-fg:color-mix(in srgb, var(--kuning) 92%, #FFFFFF);
  --bdg-cyan-bg:color-mix(in srgb, var(--cyan) 22%, var(--bg));
  --bdg-cyan-fg:color-mix(in srgb, var(--cyan) 92%, #FFFFFF);
  --bdg-oren-bg:color-mix(in srgb, var(--oren) 22%, var(--bg));
  --bdg-oren-fg:color-mix(in srgb, var(--oren) 80%, #FFFFFF);
  --bdg-hijau-bg:color-mix(in srgb, var(--hijau) 22%, var(--bg));
  --bdg-hijau-fg:color-mix(in srgb, var(--hijau) 90%, #FFFFFF);
  --bdg-neutral-bg:color-mix(in srgb, var(--teks2) 22%, var(--bg));
  --bdg-neutral-fg:color-mix(in srgb, var(--teks2) 75%, #FFFFFF);
  --bdg-merah-bg:color-mix(in srgb, var(--merah) 22%, var(--bg));
  --bdg-merah-fg:color-mix(in srgb, var(--merah) 70%, #FFFFFF);
}
/* Override token bila peranti guna tema terang sistem (prefers-color-scheme) dan
   staff belum pilih tema secara manual — kumpulan token sama makna spt di atas */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F8FAFC;--bg2:#FFFFFF;--bg3:#EEF2F6;--panel:#FFFFFF;--panel2:#F1F5F9;
    --line:#E2E8F0;--line2:#CBD5E1;
    --teks:#0F172A;--teks2:#475569;--teks3:#64748B;
    --cyan:#0891B2;--cyan2:#0E7490;--primary:#0E7490;--on-primary:#FFFFFF;--on-accent:#3B1F00;
    --biru:#2563EB;--hijau:#16A34A;--success:#15803D;--kuning:#D97706;
    --accent:#F59E0B;--oren:#EA580C;--merah:#DC2626;--danger:#B91C1C;--ungu:#7C3AED;
    /* Fasa 70g — shade lebih gelap (Tailwind ~800) supaya teks/chip lulus WCAG 4.5:1 atas latar terang */
    --txt-biru:#1E40AF;--txt-ungu:#5B21B6;--txt-kuning:#92400E;--txt-cyan:#164E63;
    --txt-oren:#9A3412;--txt-hijau:#166534;--txt-merah:#991B1B;--txt-neutral:var(--teks2);
    --bdg-biru-bg:#1E40AF;--bdg-biru-fg:#FFFFFF;
    --bdg-ungu-bg:#5B21B6;--bdg-ungu-fg:#FFFFFF;
    --bdg-kuning-bg:#92400E;--bdg-kuning-fg:#FFFFFF;
    --bdg-cyan-bg:#164E63;--bdg-cyan-fg:#FFFFFF;
    --bdg-oren-bg:#9A3412;--bdg-oren-fg:#FFFFFF;
    --bdg-hijau-bg:#166534;--bdg-hijau-fg:#FFFFFF;
    --bdg-neutral-bg:#475569;--bdg-neutral-fg:#FFFFFF;
    --bdg-merah-bg:#991B1B;--bdg-merah-fg:#FFFFFF;
  }
}
/* Override token bila staff pilih tema TERANG secara manual (attr data-theme) */
:root[data-theme="light"]{
  --bg:#F8FAFC;--bg2:#FFFFFF;--bg3:#EEF2F6;--panel:#FFFFFF;--panel2:#F1F5F9;
  --line:#E2E8F0;--line2:#CBD5E1;
  --teks:#0F172A;--teks2:#475569;--teks3:#64748B;
  --cyan:#0891B2;--cyan2:#0E7490;--primary:#0E7490;--on-primary:#FFFFFF;--on-accent:#3B1F00;
  --biru:#2563EB;--hijau:#16A34A;--success:#15803D;--kuning:#D97706;
  --accent:#F59E0B;--oren:#EA580C;--merah:#DC2626;--danger:#B91C1C;--ungu:#7C3AED;
  --txt-biru:#1E40AF;--txt-ungu:#5B21B6;--txt-kuning:#92400E;--txt-cyan:#164E63;
  --txt-oren:#9A3412;--txt-hijau:#166534;--txt-merah:#991B1B;--txt-neutral:var(--teks2);
  --bdg-biru-bg:#1E40AF;--bdg-biru-fg:#FFFFFF;
  --bdg-ungu-bg:#5B21B6;--bdg-ungu-fg:#FFFFFF;
  --bdg-kuning-bg:#92400E;--bdg-kuning-fg:#FFFFFF;
  --bdg-cyan-bg:#164E63;--bdg-cyan-fg:#FFFFFF;
  --bdg-oren-bg:#9A3412;--bdg-oren-fg:#FFFFFF;
  --bdg-hijau-bg:#166534;--bdg-hijau-fg:#FFFFFF;
  --bdg-neutral-bg:#475569;--bdg-neutral-fg:#FFFFFF;
  --bdg-merah-bg:#991B1B;--bdg-merah-fg:#FFFFFF;
}
/* Override token bila staff pilih tema GELAP secara manual (attr data-theme,
   nilai sama dgn lalai :root — eksplisit supaya tak bergantung prefers-color-scheme) */
:root[data-theme="dark"]{
  --bg:#050B14;--bg2:#0A1220;--bg3:#16233A;--panel:#0F1A2B;--panel2:#132238;
  --line:#1E3A57;--line2:#264B6E;
  --teks:#E6F1FF;--teks2:#8FA9C4;--teks3:#5B7799;
  --cyan:#22D3EE;--cyan2:#06B6D4;--primary:#0E7490;--on-primary:#F8FAFC;--on-accent:#03121B;
  --biru:#3B82F6;--hijau:#34D399;--success:#16A34A;--kuning:#FBBF24;
  --accent:#F59E0B;--oren:#FB923C;--merah:#F87171;--danger:#DC2626;--ungu:#A78BFA;
  --txt-biru:var(--biru);--txt-ungu:var(--ungu);--txt-kuning:var(--kuning);--txt-cyan:var(--cyan);
  --txt-oren:var(--oren);--txt-hijau:var(--hijau);--txt-merah:var(--merah);--txt-neutral:var(--teks2);
  /* Sama seperti blok :root gelap di atas — latar legap + teks dicerahkan.
     JANGAN kembalikan ke tint 15% lutsinar: itu punca laporan "status
     susah dibaca". */
  --bdg-biru-bg:color-mix(in srgb, var(--biru) 22%, var(--bg));
  --bdg-biru-fg:color-mix(in srgb, var(--biru) 60%, #FFFFFF);
  --bdg-ungu-bg:color-mix(in srgb, var(--ungu) 22%, var(--bg));
  --bdg-ungu-fg:color-mix(in srgb, var(--ungu) 70%, #FFFFFF);
  --bdg-kuning-bg:color-mix(in srgb, var(--kuning) 22%, var(--bg));
  --bdg-kuning-fg:color-mix(in srgb, var(--kuning) 92%, #FFFFFF);
  --bdg-cyan-bg:color-mix(in srgb, var(--cyan) 22%, var(--bg));
  --bdg-cyan-fg:color-mix(in srgb, var(--cyan) 92%, #FFFFFF);
  --bdg-oren-bg:color-mix(in srgb, var(--oren) 22%, var(--bg));
  --bdg-oren-fg:color-mix(in srgb, var(--oren) 80%, #FFFFFF);
  --bdg-hijau-bg:color-mix(in srgb, var(--hijau) 22%, var(--bg));
  --bdg-hijau-fg:color-mix(in srgb, var(--hijau) 90%, #FFFFFF);
  --bdg-neutral-bg:color-mix(in srgb, var(--teks2) 22%, var(--bg));
  --bdg-neutral-fg:color-mix(in srgb, var(--teks2) 75%, #FFFFFF);
  --bdg-merah-bg:color-mix(in srgb, var(--merah) 22%, var(--bg));
  --bdg-merah-fg:color-mix(in srgb, var(--merah) 70%, #FFFFFF);
}
/* Fasa 1 (Ciri A — Sorotan Carian) — highlight teks padanan carian */
.carian-sorot{background:color-mix(in srgb, var(--kuning) 45%, transparent);color:inherit;border-radius:3px;padding:0 1px}