/* LulusCPNS web, SATU-SATUNYA fail yang boleh ada nilai warna (DESIGN.md). Fail lain guna var() sahaja.
   Cerah = :root. Gelap = [data-theme=dark] atau ikut sistem bila data-theme=system / tiada.
   Butang merah kekal #CE1126 dengan teks putih (5.6:1) dalam kedua-dua mod. Teks merah atas permukaan
   guna --brand-text (cerah #B51022 6.9:1 atas putih, gelap #FF8A93 6.7:1 atas kad). */
:root{
  --bg:#F5F6F8; --surface:#FFFFFF; --surface-2:#EEF0F3; --surface-3:#E4E7EC;
  --ink:#1A2233; --ink-soft:#5B6475; --on-ink:#FFFFFF;
  --line:#E1E4E9; --line-strong:#C9CFD8;
  --brand:#CE1126; --brand-strong:#A50E1F; --on-brand:#FFFFFF;
  --brand-text:#B51022; --brand-tint:#FCECEE; --brand-line:#F4C3C8;
  --ok:#1E7A46; --ok-tint:#E5F3EB; --ok-line:#B8DEC8;
  --warn:#8A4B00; --warn-fill:#F5B54A; --on-warn:#1A2233; --warn-tint:#FFF3DC; --warn-line:#F0D29A;
  --bad:#B51022; --bad-tint:#FCECEE;
  --done-bg:#1E7A46; --on-done:#FFFFFF;
  --focus:#2563EB;
  --scrim:rgba(16,20,30,.55);
  --sh-bar:0 -1px 0 var(--line),0 -6px 18px -10px rgba(16,20,30,.18);
  --sh-pop:0 18px 48px -18px rgba(16,20,30,.35);
  --skeleton:#E4E7EC;
  /* rajah figural bank (SVG hitam atas putih), diwarnakan semula ikut tema */
  --fig-bg:#FFFFFF; --fig-ink:#1A2233;
  /* kad kongsi canvas, permukaan tetap jenama (sama dalam dua mod) */
  --kad-bg:#CE1126; --kad-bg-2:#A50E1F; --kad-ink:#FFFFFF; --kad-soft:rgba(255,255,255,.78);
  --kad-panel:rgba(255,255,255,.12); --kad-ok:#9FF0C2; --kad-bad:#FFD2D6; --kad-line:rgba(255,255,255,.28);
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#161B26; --surface:#1F2635; --surface-2:#262E40; --surface-3:#2F384C;
  --ink:#E6EAF2; --ink-soft:#A8B2C3; --on-ink:#161B26;
  --line:#2E3748; --line-strong:#40495D;
  --brand:#CE1126; --brand-strong:#E0293C; --on-brand:#FFFFFF;
  --brand-text:#FF8A93; --brand-tint:#3A2029; --brand-line:#6B2D37;
  --ok:#5FD08E; --ok-tint:#1C3328; --ok-line:#2E5C43;
  --warn:#F5B54A; --warn-fill:#F5B54A; --on-warn:#161B26; --warn-tint:#3A3020; --warn-line:#6A5427;
  --bad:#FF8A93; --bad-tint:#3A2029;
  --done-bg:#2E9A5E; --on-done:#FFFFFF;
  --focus:#7AA7FF;
  --scrim:rgba(5,8,14,.7);
  --sh-bar:0 -1px 0 var(--line),0 -6px 18px -10px rgba(0,0,0,.6);
  --sh-pop:0 18px 48px -18px rgba(0,0,0,.7);
  --skeleton:#2F384C;
  --fig-bg:#1F2635; --fig-ink:#E6EAF2;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]):not([data-theme=dark]){
    --bg:#161B26; --surface:#1F2635; --surface-2:#262E40; --surface-3:#2F384C;
    --ink:#E6EAF2; --ink-soft:#A8B2C3; --on-ink:#161B26;
    --line:#2E3748; --line-strong:#40495D;
    --brand:#CE1126; --brand-strong:#E0293C; --on-brand:#FFFFFF;
    --brand-text:#FF8A93; --brand-tint:#3A2029; --brand-line:#6B2D37;
    --ok:#5FD08E; --ok-tint:#1C3328; --ok-line:#2E5C43;
    --warn:#F5B54A; --warn-fill:#F5B54A; --on-warn:#161B26; --warn-tint:#3A3020; --warn-line:#6A5427;
    --bad:#FF8A93; --bad-tint:#3A2029;
    --done-bg:#2E9A5E; --on-done:#FFFFFF;
    --focus:#7AA7FF;
    --scrim:rgba(5,8,14,.7);
    --sh-bar:0 -1px 0 var(--line),0 -6px 18px -10px rgba(0,0,0,.6);
    --sh-pop:0 18px 48px -18px rgba(0,0,0,.7);
    --skeleton:#2F384C;
    --fig-bg:#1F2635; --fig-ink:#E6EAF2;
    color-scheme:dark;
  }
}
/* SVG bank figural guna atribut fill/stroke hitam putih. Peraturan CSS menang atas atribut persembahan. */
.fig svg [fill="#ffffff"]{fill:var(--fig-bg)}
.fig svg [fill="#000000"]{fill:var(--fig-ink)}
.fig svg [stroke="#000000"]{stroke:var(--fig-ink)}