/* Tema JKSTR: 26 tema warna + 17 pilihan font (berasingan).
   Guna:  <html data-tema="rasmi" data-font="jakarta-opensans">
   Warna dan font tidak terikat. Tukar data-font bila-bila masa tanpa ubah warna.

   Muatkan font yang dipakai sahaja dalam <head>. Untuk lalai:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap">
   Semua font sekali gus (untuk pemilih font):
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Lexend:wght@400;500;600;700&family=Roboto:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=Figtree:wght@400;500;600;700&family=Red+Hat+Display:wght@400;500;600;700&family=Red+Hat+Text:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=Albert+Sans:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600;700&family=Mulish:wght@400;500;600;700&family=Atkinson+Hyperlegible:wght@400;500;600;700&display=swap">
*/

/* ================= WARNA ================= */

/* 1. Biru Korporat — Portal rasmi, sistem utama */
:root, [data-tema="rasmi"] {
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --surface-2: #EEF2F7;
  --fg: #0F1B2D;
  --muted: #5A6678;
  --line: #E1E6EE;
  --accent: #1F3A68;
  --accent-fg: #FFFFFF;
  --accent-soft: #E7EDF7;
  --highlight: #C9A24A;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(15,27,45,.05),0 4px 14px rgba(15,27,45,.05);
  color-scheme: light;
}

/* 2. Zamrud — Sistem dalaman harian */
[data-tema="zamrud"] {
  --bg: #F4F7F6;
  --surface: #FFFFFF;
  --surface-2: #EBF1EF;
  --fg: #0E1F1A;
  --muted: #566B64;
  --line: #DEE7E3;
  --accent: #0B6E4F;
  --accent-fg: #FFFFFF;
  --accent-soft: #E1F2EB;
  --highlight: #10B981;
  --ok: #0B6E4F;
  --ok-soft: #E1F2EB;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(14,31,26,.05),0 4px 14px rgba(14,31,26,.05);
  color-scheme: light;
}

/* 3. Hijau JKSTR — Identiti JKSTR, eQadi Finder */
[data-tema="jkstr"] {
  --bg: #F2F7F4;
  --surface: #FFFFFF;
  --surface-2: #E8F1EC;
  --fg: #0E241B;
  --muted: #54695F;
  --line: #DAE6DF;
  --accent: #00573F;
  --accent-fg: #FFFFFF;
  --accent-soft: #DCEFE5;
  --highlight: #FF9800;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 20px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  color-scheme: light;
}

/* 4. Teal Pesisir — Aplikasi orang awam */
[data-tema="pantai"] {
  --bg: #F4F8F8;
  --surface: #FFFFFF;
  --surface-2: #EAF2F2;
  --fg: #0F2224;
  --muted: #56696B;
  --line: #DCE8E8;
  --accent: #0F766E;
  --accent-fg: #FFFFFF;
  --accent-soft: #DFF3F1;
  --highlight: #2DD4BF;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(15,118,110,.06),0 6px 18px rgba(15,118,110,.06);
  color-scheme: light;
}

/* 5. Marun Songket — Acara rasmi, laman pengurusan */
[data-tema="songket"] {
  --bg: #F8F6F6;
  --surface: #FFFFFF;
  --surface-2: #F3EEEE;
  --fg: #22161A;
  --muted: #6E5E62;
  --line: #ECE3E4;
  --accent: #7F1D2D;
  --accent-fg: #FFFFFF;
  --accent-soft: #F6E6E9;
  --highlight: #C9A24A;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(34,22,26,.05),0 4px 14px rgba(34,22,26,.05);
  color-scheme: light;
}

/* 6. Malam Slate — Mod gelap, kerja lama di skrin */
[data-tema="malam"] {
  --bg: #0B1220;
  --surface: #111A2B;
  --surface-2: #162135;
  --fg: #E5EAF2;
  --muted: #94A0B4;
  --line: #223047;
  --accent: #1E3A8A;
  --accent-fg: #EFF4FF;
  --accent-soft: #1C2C55;
  --highlight: #60A5FA;
  --ok: #4ADE80;
  --ok-soft: #12301F;
  --warn: #FBBF24;
  --warn-soft: #372A10;
  --bad: #F87171;
  --bad-soft: #3A1A1A;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}

/* 7. Indigo — Laporan dan dashboard */
[data-tema="batik"] {
  --bg: #F6F6FB;
  --surface: #FFFFFF;
  --surface-2: #EEEEF8;
  --fg: #16152E;
  --muted: #5E5D7A;
  --line: #E3E3F0;
  --accent: #3730A3;
  --accent-fg: #FFFFFF;
  --accent-soft: #E9E8FA;
  --highlight: #818CF8;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(55,48,163,.06),0 6px 18px rgba(55,48,163,.06);
  color-scheme: light;
}

/* 8. Grafit — Panel admin, sistem ICT */
[data-tema="mono"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F4F5F7;
  --fg: #111827;
  --muted: #5B6472;
  --line: #E5E7EB;
  --accent: #1F2937;
  --accent-fg: #FFFFFF;
  --accent-soft: #F1F3F6;
  --highlight: #2563EB;
  --ok: #15803D;
  --ok-soft: #E3F5E9;
  --warn: #A16207;
  --warn-soft: #FDF3D8;
  --bad: #B91C1C;
  --bad-soft: #FDE7E7;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: none;
  color-scheme: light;
}

/* 9. Koral Senja — Promosi, aplikasi komuniti */
[data-tema="senja"] {
  --bg: #FAF7F5;
  --surface: #FFFFFF;
  --surface-2: #F5EFEB;
  --fg: #1F1612;
  --muted: #6E615A;
  --line: #EDE4DE;
  --accent: #B93A26;
  --accent-fg: #FFFFFF;
  --accent-soft: #FBE9E4;
  --highlight: #F59E0B;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(31,22,18,.05),0 6px 18px rgba(185,58,38,.06);
  color-scheme: light;
}

/* 10. Hutan Malam — Dashboard pemantauan 24 jam */
[data-tema="hutan"] {
  --bg: #0A1512;
  --surface: #0F1F1A;
  --surface-2: #142821;
  --fg: #E2EEE9;
  --muted: #8FA79E;
  --line: #1F362E;
  --accent: #134E3F;
  --accent-fg: #E8FFF6;
  --highlight: #34D399;
  --ok: #34D399;
  --ok-soft: #123327;
  --warn: #FBBF24;
  --warn-soft: #372A10;
  --bad: #F87171;
  --bad-soft: #3A1A1A;
  --accent-soft: #17433A;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 8px 24px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* 11. Kontras Tinggi — Warga emas, OKU penglihatan */
[data-tema="kontras"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F0F0F0;
  --fg: #000000;
  --muted: #333333;
  --line: #000000;
  --accent: #0033A8;
  --accent-fg: #FFFFFF;
  --accent-soft: #DCE6FF;
  --highlight: #FFD400;
  --ok: #00602E;
  --ok-soft: #D8F5E3;
  --warn: #7A4300;
  --warn-soft: #FFEBC2;
  --bad: #A30000;
  --bad-soft: #FFDCDC;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: none;
  color-scheme: light;
}

/* 12. Biru Langit — Portal maklumat, FAQ */
[data-tema="langit"] {
  --bg: #F4F9FC;
  --surface: #FFFFFF;
  --surface-2: #E9F3F9;
  --fg: #0C1F2E;
  --muted: #54697A;
  --line: #DCEAF3;
  --accent: #0369A1;
  --accent-fg: #FFFFFF;
  --accent-soft: #E0F0FA;
  --highlight: #38BDF8;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  color-scheme: light;
}

/* 13. Biru Kobalt — Sistem korporat moden */
[data-tema="kobalt"] {
  --bg: #F5F8FF;
  --surface: #FFFFFF;
  --surface-2: #ECF1FD;
  --fg: #0B1533;
  --muted: #56617E;
  --line: #DEE5F6;
  --accent: #1D4ED8;
  --accent-fg: #FFFFFF;
  --accent-soft: #E4ECFE;
  --highlight: #93C5FD;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  color-scheme: light;
}

/* 14. Kabus Pagi — Aplikasi dalaman, intranet */
[data-tema="kabus"] {
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --fg: #0F172A;
  --muted: #5B6678;
  --line: #E2E8F0;
  --accent: #475569;
  --accent-fg: #FFFFFF;
  --accent-soft: #EEF2F6;
  --highlight: #6366F1;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  color-scheme: light;
}

/* 15. Kelabu Batu — Sistem rekod, arkib */
[data-tema="batu"] {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --surface-2: #F4F3F1;
  --fg: #1C1917;
  --muted: #66605A;
  --line: #E7E5E2;
  --accent: #44403C;
  --accent-fg: #FFFFFF;
  --accent-soft: #F1EFEC;
  --highlight: #0EA5E9;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  color-scheme: light;
}

/* 16. Kayu Cengal — Muzium, warisan, perpustakaan */
[data-tema="cengal"] {
  --bg: #F8F6F3;
  --surface: #FFFFFF;
  --surface-2: #F2EEE8;
  --fg: #24180F;
  --muted: #6C5F54;
  --line: #E9E2D9;
  --accent: #5B3A29;
  --accent-fg: #FFFFFF;
  --accent-soft: #F3E9E1;
  --highlight: #D4A373;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  color-scheme: light;
}

/* 17. Zaitun — Alam sekitar, pertanian */
[data-tema="zaitun"] {
  --bg: #F6F7F2;
  --surface: #FFFFFF;
  --surface-2: #EEF0E6;
  --fg: #1A1F0E;
  --muted: #5F664F;
  --line: #E2E6D6;
  --accent: #4D5B23;
  --accent-fg: #FFFFFF;
  --accent-soft: #ECF0DD;
  --highlight: #A3B63A;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  color-scheme: light;
}

/* 18. Ungu Diraja — Pengurusan atasan, eksekutif */
[data-tema="diraja"] {
  --bg: #F7F5FC;
  --surface: #FFFFFF;
  --surface-2: #EFEBF9;
  --fg: #1B1330;
  --muted: #635A7A;
  --line: #E5E0F2;
  --accent: #5B21B6;
  --accent-fg: #FFFFFF;
  --accent-soft: #EEE7FB;
  --highlight: #A78BFA;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  color-scheme: light;
}

/* 19. Plum — Kebajikan, khidmat keluarga */
[data-tema="plum"] {
  --bg: #FAF6F9;
  --surface: #FFFFFF;
  --surface-2: #F4ECF1;
  --fg: #26121E;
  --muted: #6E5966;
  --line: #EEE1E8;
  --accent: #6B2154;
  --accent-fg: #FFFFFF;
  --accent-soft: #F6E6EF;
  --highlight: #E9A8C9;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  color-scheme: light;
}

/* 20. Mawar — Kempen, program wanita */
[data-tema="mawar"] {
  --bg: #FCF6F8;
  --surface: #FFFFFF;
  --surface-2: #F8ECF1;
  --fg: #2A0F1C;
  --muted: #73596A;
  --line: #F1DFE7;
  --accent: #BE185D;
  --accent-fg: #FFFFFF;
  --accent-soft: #FCE7F0;
  --highlight: #F9A8D4;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  color-scheme: light;
}

/* 21. Kuning Diraja — Istiadat, laman rasmi negeri */
[data-tema="kuning"] {
  --bg: #FFFCF0;
  --surface: #FFFFFF;
  --surface-2: #FBF5DE;
  --fg: #231B00;
  --muted: #6E6440;
  --line: #F0E7C4;
  --accent: #7A5A00;
  --accent-fg: #FFFFFF;
  --accent-soft: #FAF0CC;
  --highlight: #FACC15;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  color-scheme: light;
}

/* 22. Hitam Emas — Laman premium, majlis */
[data-tema="hitamemas"] {
  --bg: #FAF8F3;
  --surface: #FFFFFF;
  --surface-2: #F3EFE6;
  --fg: #161412;
  --muted: #655E54;
  --line: #E8E2D6;
  --accent: #1C1917;
  --accent-fg: #F5E6B8;
  --accent-soft: #F2ECDD;
  --highlight: #D4A017;
  --ok: #18794E;
  --ok-soft: #E4F4EC;
  --warn: #9A5B00;
  --warn-soft: #FCF0DC;
  --bad: #B42318;
  --bad-soft: #FDE8E6;
  --radius: 4px;
  --radius-sm: 2px;
  --shadow: 0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  color-scheme: light;
}

/* 23. Nila Gelap — Mod gelap untuk analitik */
[data-tema="nila"] {
  --bg: #0E0D1F;
  --surface: #16152E;
  --surface-2: #1D1C3A;
  --fg: #E7E6F5;
  --muted: #9D9BBA;
  --line: #2A2950;
  --accent: #312E81;
  --accent-fg: #EEF0FF;
  --accent-soft: #26245A;
  --highlight: #A5B4FC;
  --ok: #4ADE80;
  --ok-soft: #12301F;
  --warn: #FBBF24;
  --warn-soft: #372A10;
  --bad: #F87171;
  --bad-soft: #3A1A1A;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 8px 24px rgba(0,0,0,.38);
  color-scheme: dark;
}

/* 24. Arang — Mod gelap neutral */
[data-tema="arang"] {
  --bg: #111214;
  --surface: #18191C;
  --surface-2: #1F2024;
  --fg: #ECECEE;
  --muted: #9C9DA3;
  --line: #2B2D32;
  --accent: #2A2C31;
  --accent-fg: #F5F5F7;
  --accent-soft: #2E2A20;
  --highlight: #F5A524;
  --ok: #4ADE80;
  --ok-soft: #12301F;
  --warn: #FBBF24;
  --warn-soft: #372A10;
  --bad: #F87171;
  --bad-soft: #3A1A1A;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 8px 24px rgba(0,0,0,.38);
  color-scheme: dark;
}

/* 25. Laut Dalam — Pusat kawalan, bilik operasi */
[data-tema="lautdalam"] {
  --bg: #0A1628;
  --surface: #0F2038;
  --surface-2: #142944;
  --fg: #E4ECF6;
  --muted: #93A5BD;
  --line: #1E3555;
  --accent: #0C3B6E;
  --accent-fg: #EAF2FF;
  --accent-soft: #173A63;
  --highlight: #F2C14E;
  --ok: #4ADE80;
  --ok-soft: #12301F;
  --warn: #FBBF24;
  --warn-soft: #372A10;
  --bad: #F87171;
  --bad-soft: #3A1A1A;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 8px 24px rgba(0,0,0,.38);
  color-scheme: dark;
}

/* 26. Terumbu Gelap — Dashboard pantai, marin */
[data-tema="terumbu"] {
  --bg: #071A1C;
  --surface: #0C2427;
  --surface-2: #102D31;
  --fg: #E0F2F1;
  --muted: #8EAEAD;
  --line: #1A3B3F;
  --accent: #134E4A;
  --accent-fg: #E6FFFB;
  --accent-soft: #15403D;
  --highlight: #5EEAD4;
  --ok: #4ADE80;
  --ok-soft: #12301F;
  --warn: #FBBF24;
  --warn-soft: #372A10;
  --bad: #F87171;
  --bad-soft: #3A1A1A;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 8px 24px rgba(0,0,0,.38);
  color-scheme: dark;
}

/* ================= FONT ================= */

/* Plus Jakarta Sans + Open Sans (lalai) */
:root, [data-font="jakarta-opensans"] {
  --font-d: "Plus Jakarta Sans",system-ui,sans-serif;
  --font-b: "Open Sans",system-ui,sans-serif;
  --d-weight: 700;
  --d-track: -0.02em;
}

/* Manrope + Inter */
[data-font="manrope-inter"] {
  --font-d: "Manrope",system-ui,sans-serif;
  --font-b: "Inter",system-ui,sans-serif;
  --d-weight: 800;
  --d-track: -0.02em;
}

/* Poppins + Open Sans */
[data-font="poppins-opensans"] {
  --font-d: "Poppins",system-ui,sans-serif;
  --font-b: "Open Sans",system-ui,sans-serif;
  --d-weight: 600;
  --d-track: -0.01em;
}

/* DM Sans */
[data-font="dmsans"] {
  --font-d: "DM Sans",system-ui,sans-serif;
  --font-b: "DM Sans",system-ui,sans-serif;
  --d-weight: 700;
  --d-track: -0.02em;
}

/* IBM Plex Sans */
[data-font="plex"] {
  --font-d: "IBM Plex Sans",system-ui,sans-serif;
  --font-b: "IBM Plex Sans",system-ui,sans-serif;
  --d-weight: 600;
  --d-track: -0.01em;
}

/* Source Sans 3 */
[data-font="sourcesans"] {
  --font-d: "Source Sans 3",system-ui,sans-serif;
  --font-b: "Source Sans 3",system-ui,sans-serif;
  --d-weight: 700;
  --d-track: -0.01em;
}

/* Lexend */
[data-font="lexend"] {
  --font-d: "Lexend",system-ui,sans-serif;
  --font-b: "Lexend",system-ui,sans-serif;
  --d-weight: 600;
  --d-track: -0.01em;
}

/* Roboto */
[data-font="roboto"] {
  --font-d: "Roboto",system-ui,sans-serif;
  --font-b: "Roboto",system-ui,sans-serif;
  --d-weight: 700;
  --d-track: -0.01em;
}

/* Public Sans */
[data-font="publicsans"] {
  --font-d: "Public Sans",system-ui,sans-serif;
  --font-b: "Public Sans",system-ui,sans-serif;
  --d-weight: 700;
  --d-track: -0.01em;
}

/* Figtree */
[data-font="figtree"] {
  --font-d: "Figtree",system-ui,sans-serif;
  --font-b: "Figtree",system-ui,sans-serif;
  --d-weight: 700;
  --d-track: -0.01em;
}

/* Red Hat Display + Red Hat Text */
[data-font="redhat"] {
  --font-d: "Red Hat Display",system-ui,sans-serif;
  --font-b: "Red Hat Text",system-ui,sans-serif;
  --d-weight: 700;
  --d-track: -0.01em;
}

/* Noto Sans */
[data-font="noto"] {
  --font-d: "Noto Sans",system-ui,sans-serif;
  --font-b: "Noto Sans",system-ui,sans-serif;
  --d-weight: 700;
  --d-track: -0.01em;
}

/* Hanken Grotesk */
[data-font="hanken"] {
  --font-d: "Hanken Grotesk",system-ui,sans-serif;
  --font-b: "Hanken Grotesk",system-ui,sans-serif;
  --d-weight: 700;
  --d-track: -0.02em;
}

/* Albert Sans + Inter */
[data-font="albert-inter"] {
  --font-d: "Albert Sans",system-ui,sans-serif;
  --font-b: "Inter",system-ui,sans-serif;
  --d-weight: 700;
  --d-track: -0.02em;
}

/* Be Vietnam Pro */
[data-font="bevietnam"] {
  --font-d: "Be Vietnam Pro",system-ui,sans-serif;
  --font-b: "Be Vietnam Pro",system-ui,sans-serif;
  --d-weight: 700;
  --d-track: -0.01em;
}

/* Mulish */
[data-font="mulish"] {
  --font-d: "Mulish",system-ui,sans-serif;
  --font-b: "Mulish",system-ui,sans-serif;
  --d-weight: 800;
  --d-track: -0.01em;
}

/* Atkinson Hyperlegible */
[data-font="atkinson"] {
  --font-d: "Atkinson Hyperlegible",system-ui,sans-serif;
  --font-b: "Atkinson Hyperlegible",system-ui,sans-serif;
  --d-weight: 700;
  --d-track: 0;
}

/* ================= ASAS ================= */
body { background: var(--bg); color: var(--fg); font-family: var(--font-b); }
h1, h2, h3, h4 { font-family: var(--font-d); font-weight: var(--d-weight); letter-spacing: var(--d-track); }