/* ============================================================
   Token desain.

   Dasarnya monokrom; warna hanya dipakai sebagai sinyal —
   hijau aman, kuning waspada, merah lewat batas. Keadaan aktif
   memakai putih (terang: hitam), bukan warna aksen. Setiap angka
   memakai huruf mono tabular supaya kolom nilai sejajar.
   ============================================================ */

:root {
  color-scheme: dark;

  --bg:    #0a0a0b;
  --s1:    #101012;   /* permukaan kartu */
  --s2:    #17171a;   /* hover / permukaan naik */
  --s3:    #1e1e22;   /* sel kosong, isian */
  --hair:  #232327;   /* garis rambut */
  --hair2: #2e2e34;

  --tx:    #ededf0;
  --tx2:   #9a9aa4;
  --tx3:   #65656e;

  --ok:    #3dd68c;
  --warn:  #ffb224;
  --bad:   #ff6369;

  --sel:    #ffffff;  /* keadaan aktif */
  --on-sel: #0a0a0b;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
          "Roboto Mono", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          system-ui, sans-serif;

  --r:   8px;
  --r2:  12px;
  --pad: 14px;

  --nav-h: 58px;
  --sb: env(safe-area-inset-bottom, 0px);

  --ease: cubic-bezier(.22, .9, .3, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg:    #fbfbfa;
    --s1:    #ffffff;
    --s2:    #f4f4f3;
    --s3:    #ebebe9;
    --hair:  #e4e4e1;
    --hair2: #d3d3cf;

    --tx:    #16161a;
    --tx2:   #63636c;
    --tx3:   #8e8e97;

    --ok:    #0f8b52;
    --warn:  #a86400;
    --bad:   #cf2c34;

    --sel:    #16161a;
    --on-sel: #ffffff;
  }
}