/* Token METI (hijau, biru langit, lime dari logo) (DS §2). Satu-satunya berkas CSS yang boleh berisi hex (gerbang-token-meti).
   Dua blok gelap (@media dan [data-theme="dark"]) WAJIB identik (gerbang-tema-kembar). */
:root{
  --meti-navy:#0A5C47; --meti-petrol:#1E7FA8; --meti-teal:#12896B;
  --meti-cyan:#4AA9E0; --meti-lime:#9DC94F; --meti-cloud:#F2F8F5; --meti-oranye:#C55A11;

  --paper:#FFFFFF; --surface:#F2F8F5; --card:#FFFFFF;
  --soft-biru:#E3F3FA; --soft-hijau:#E2F3EC; --akun-isi:#E4F3EE; --akun-krem:#FBF1DC; --akun-biru:#BFE3F4;
  --line:#D3E3DC; --line-cell:#DCE9E3; --line-ctl:#667C73;
  --ink:#0E1B17; --ink2:#46594F; --head:#0B3D31;
  --brand:#0A5C47; --brand2:#12896B;
  --accent:#00705A; --accent-isi:#12896B; --on-accent:#FFFFFF;
  --on-brand:#FFFFFF;   /* teks di atas pita hijau METI */
  --data1:#0A5C47; --data2:#12896B; --data3:#4AA9E0; --data4:#9DC94F; --data5:#1E7FA8;
  --sorot:#9DC94F;
  --ok:#066B52; --warn:#A8480A; --bad:#B3261E; --info:#1E7FA8;
  --ok-bg:#E2F3EC; --warn-bg:#FBEBDD; --bad-bg:#FBE7E5; --info-bg:#E3F3FA;
  --fokus:#1E7FA8;
  --shadow:0 2px 14px rgb(10 60 45/.08); --shadow-lg:0 8px 28px rgb(10 60 45/.16);
  --pendar:0 0 0 1px rgb(74 169 224/.35),0 8px 28px rgb(74 169 224/.18);
  --r:14px; --r-sm:10px; --r-lg:16px; --r-pil:999px;
  --top:60px; --maks:1240px; --gut:16px; --gap:12px; --target:44px;
  --display:"Poppins",system-ui,sans-serif;
  --font:"Inter",Arial,system-ui,sans-serif;
  --t-display:30px; --t-h1:24px; --t-h2:18px; --t-angka:28px; --t-body:15px; --t-kecil:12.5px; --t-label:11px;
  color-scheme:light;
}
@media (min-width:600px){:root{--gut:20px}}
@media (min-width:768px){:root{--t-display:44px; --t-h1:32px; --t-h2:22px; --t-angka:40px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E1A17; --surface:#14241F; --card:#14241F;
  --soft-biru:#153A4A; --soft-hijau:#123A2F; --akun-isi:#153A4A; --akun-krem:#3A2E1C; --akun-biru:#1E5E78;
  --line:#25403A; --line-cell:#25403A; --line-ctl:#7E9A8F;
  --ink:#E8F2EE; --ink2:#A7BDB4; --head:#FFFFFF;
  --brand:#0B3D31; --brand2:#12896B;
  --accent:#4FD3AD; --accent-isi:#12896B; --on-accent:#08201A;
  --data1:#5BB8EC; --data2:#4FD3AD; --data3:#B3DB6E; --data4:#9FB8AE; --data5:#3E9BCB;
  --ok:#4FD3AD; --warn:#F2955A; --bad:#FF8A80; --info:#5BB8EC;
  --ok-bg:#123A2F; --warn-bg:#3A2616; --bad-bg:#3A1B19; --info-bg:#153A4A;
  --fokus:#5BB8EC;
  --shadow:0 2px 14px rgb(0 0 0/.35); --shadow-lg:0 8px 28px rgb(0 0 0/.5);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0E1A17; --surface:#14241F; --card:#14241F;
  --soft-biru:#153A4A; --soft-hijau:#123A2F; --akun-isi:#153A4A; --akun-krem:#3A2E1C; --akun-biru:#1E5E78;
  --line:#25403A; --line-cell:#25403A; --line-ctl:#7E9A8F;
  --ink:#E8F2EE; --ink2:#A7BDB4; --head:#FFFFFF;
  --brand:#0B3D31; --brand2:#12896B;
  --accent:#4FD3AD; --accent-isi:#12896B; --on-accent:#08201A;
  --data1:#5BB8EC; --data2:#4FD3AD; --data3:#B3DB6E; --data4:#9FB8AE; --data5:#3E9BCB;
  --ok:#4FD3AD; --warn:#F2955A; --bad:#FF8A80; --info:#5BB8EC;
  --ok-bg:#123A2F; --warn-bg:#3A2616; --bad-bg:#3A1B19; --info-bg:#153A4A;
  --fokus:#5BB8EC;
  --shadow:0 2px 14px rgb(0 0 0/.35); --shadow-lg:0 8px 28px rgb(0 0 0/.5);
  color-scheme:dark;
}