/* BLOK TOKEN. Satu-satunya tempat warna ditulis. Palet cerah diambil dari
   app/lib/core/theme.dart dan models.dart (warna subjek), palet gelap ikut
   gate dark mode (latar #161B26, kad #1F2635, teks #E6EAF2, teks lembut #A8B2C3). */
:root {
  color-scheme: light;
  --bg: #F6F7FB;
  --surface: #FFFFFF;
  --surface-2: #EEF1F8;
  --ink: #14213D;
  --ink-soft: #4A5568;
  --line: #DCE1EC;
  --primary: #1B4FD1;
  --primary-ink: #FFFFFF;
  --primary-strong: #12368F;
  --primary-tint: #E6EDFD;
  --accent: #FFC233;
  --accent-ink: #14213D;
  --hero-a: #1B4FD1;
  --hero-b: #102F80;
  --on-hero: #FFFFFF;
  --on-hero-soft: #DCE6FF;
  --on-hero-line: rgba(255, 255, 255, 0.28);
  --hero-cell: rgba(255, 255, 255, 0.12);
  --frame: #0F1B3D;
  --frame-ring: #0F1B3D;
  --betul: #146C2E;
  --betul-bg: #E3F4E8;
  --salah: #B3101C;
  --salah-bg: #FCE6E8;
  --separa: #9A5300;
  --separa-bg: #FFF1DC;
  --bm: #C1121F;
  --bi: #1B4FD1;
  --mat: #6A1B9A;
  --sains: #177A35;
  --bm-bg: #FBE7E9;
  --bi-bg: #E6EDFD;
  --mat-bg: #F1E6F7;
  --sains-bg: #E3F4E8;
  --shadow: rgba(20, 33, 61, 0.12);
  --shadow-strong: rgba(20, 33, 61, 0.28);
  --scrim: rgba(246, 247, 251, 0.94);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="cerah"]) {
    color-scheme: dark;
    --bg: #161B26;
    --surface: #1F2635;
    --surface-2: #262E40;
    --ink: #E6EAF2;
    --ink-soft: #A8B2C3;
    --line: #3A4458;
    --primary: #8FB0FF;
    --primary-ink: #0B1A3D;
    --primary-strong: #B5CBFF;
    --primary-tint: #243150;
    --accent: #FFC233;
    --accent-ink: #14213D;
    --hero-a: #1A3A99;
    --hero-b: #111E45;
    --on-hero: #FFFFFF;
    --on-hero-soft: #C9D6F5;
    --on-hero-line: rgba(255, 255, 255, 0.22);
    --hero-cell: rgba(255, 255, 255, 0.10);
    --frame: #0B0F18;
    --frame-ring: #3A4458;
    --betul: #76B98A;
    --betul-bg: #1E3326;
    --salah: #E58A91;
    --salah-bg: #3A1E24;
    --separa: #F0B35C;
    --separa-bg: #3A2C17;
    --bm: #E58A91;
    --bi: #8FB0FF;
    --mat: #C39BE0;
    --sains: #76B98A;
    --bm-bg: #3A1E24;
    --bi-bg: #243150;
    --mat-bg: #33243F;
    --sains-bg: #1E3326;
    --shadow: rgba(0, 0, 0, 0.30);
    --shadow-strong: rgba(0, 0, 0, 0.50);
    --scrim: rgba(22, 27, 38, 0.94);
  }
}

:root[data-tema="gelap"] {
  color-scheme: dark;
  --bg: #161B26;
  --surface: #1F2635;
  --surface-2: #262E40;
  --ink: #E6EAF2;
  --ink-soft: #A8B2C3;
  --line: #3A4458;
  --primary: #8FB0FF;
  --primary-ink: #0B1A3D;
  --primary-strong: #B5CBFF;
  --primary-tint: #243150;
  --accent: #FFC233;
  --accent-ink: #14213D;
  --hero-a: #1A3A99;
  --hero-b: #111E45;
  --on-hero: #FFFFFF;
  --on-hero-soft: #C9D6F5;
  --on-hero-line: rgba(255, 255, 255, 0.22);
  --hero-cell: rgba(255, 255, 255, 0.10);
  --frame: #0B0F18;
  --frame-ring: #3A4458;
  --betul: #76B98A;
  --betul-bg: #1E3326;
  --salah: #E58A91;
  --salah-bg: #3A1E24;
  --separa: #F0B35C;
  --separa-bg: #3A2C17;
  --bm: #E58A91;
  --bi: #8FB0FF;
  --mat: #C39BE0;
  --sains: #76B98A;
  --bm-bg: #3A1E24;
  --bi-bg: #243150;
  --mat-bg: #33243F;
  --sains-bg: #1E3326;
  --shadow: rgba(0, 0, 0, 0.30);
  --shadow-strong: rgba(0, 0, 0, 0.50);
  --scrim: rgba(22, 27, 38, 0.94);
}