/* ==========================================================================
   SOLARAKYAT — ds-token.css
   Tahap 2: satu-satunya sumber warna, huruf, jarak, radius, dan bayangan.

   Awalan kelas/variabel BARU adalah `ds-`, BUKAN `sr-`.
   Berkas lama public/css/solarakyat-public.css memakai `sr-` dengan arti
   berbeda; jangan dicampur.

   Nilai warna di blok :root di bawah ditetapkan pemilik dan TIDAK boleh
   diubah tanpa persetujuan. Berkas lain merujuk var(--ds-*), tidak menulis
   hex harfiah.
   ========================================================================== */

:root {
  /* ---------- Warna: aksen matahari ---------- */
  --ds-sun: #F48C14;          /* aksi utama, satu per layar */
  --ds-sun-deep: #C96C06;     /* tautan dan judul aksen */
  --ds-sun-soft: #FDF2E5;     /* latar sorot */
  --ds-sun-line: #F6D9AE;     /* garis pada latar sorot */

  /* ---------- Warna: teks ---------- */
  --ds-ink: #151515;          /* teks */
  --ds-ink-2: #5E5A54;        /* teks sekunder */
  --ds-ink-3: #9A948C;        /* label */

  /* ---------- Warna: permukaan ---------- */
  --ds-paper: #FFFFFF;
  --ds-ground: #F7F6F2;       /* latar halaman */
  --ds-line: #E7E4DD;

  /* ---------- Warna: bagian gelap ---------- */
  --ds-night: #141310;
  --ds-night-fg: #F2EFEA;
  --ds-night-fg-2: #A49D94;

  /* ---------- Warna: status ---------- */
  --ds-ok: #2F6B46;
  --ds-ok-bg: #E8F1EB;
  --ds-warn: #8A6410;
  --ds-warn-bg: #FBF0D5;
  --ds-bad: #9B3B20;
  --ds-bad-bg: #F7E7E2;

  /* ---------- Kanal warna untuk rgba() ----------
     Dipakai menulis warna transparan: rgba(var(--ds-ink-rgb), .06).

     DIPILIH KANAL, BUKAN color-mix(): hosting melayani banyak pengguna
     Android lama dan dukungan color-mix() di sana tidak terjamin, sedangkan
     rgba(var(--x), a) bekerja di semua peramban yang sudah mendukung CSS
     custom property.

     Nilai di bawah WAJIB turunan persis dari hex di atas — diuji otomatis
     oleh Tahap2SistemDesainTest::test_kanal_rgb_cocok_dengan_hex_token.
       #151515 -> 21,21,21     #FFFFFF -> 255,255,255
       #141310 -> 20,19,16     #F48C14 -> 244,140,20
       #E7E4DD -> 231,228,221  #8A6410 -> 138,100,16
       #2F6B46 -> 47,107,70                                             */
  --ds-ink-rgb: 21, 21, 21;
  --ds-paper-rgb: 255, 255, 255;
  --ds-night-rgb: 20, 19, 16;
  --ds-sun-rgb: 244, 140, 20;
  --ds-line-rgb: 231, 228, 221;
  --ds-warn-rgb: 138, 100, 16;
  --ds-ok-rgb: 47, 107, 70;

  /* ---------- Jarak ---------- */
  --ds-sp-1: 4px;
  --ds-sp-2: 8px;
  --ds-sp-3: 12px;
  --ds-sp-4: 16px;
  --ds-sp-5: 20px;
  --ds-sp-6: 24px;
  --ds-sp-7: 32px;
  --ds-sp-8: 44px;
  --ds-sp-9: 60px;
  --ds-sp-10: 80px;

  /* ---------- Radius ---------- */
  --ds-r-1: 9px;
  --ds-r-2: 11px;
  --ds-r-3: 14px;
  --ds-r-4: 18px;
  --ds-r-5: 24px;
  --ds-r-pill: 999px;

  /* ---------- Bayangan ---------- */
  --ds-shadow-1: 0 1px 2px rgba(var(--ds-ink-rgb), .06), 0 1px 3px rgba(var(--ds-ink-rgb), .04);
  --ds-shadow-2: 0 4px 16px rgba(var(--ds-ink-rgb), .08), 0 12px 32px rgba(var(--ds-ink-rgb), .06);

  /* ---------- Huruf ---------- */
  --ds-font: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Skala tipografi (px) sesuai mockup */
  --ds-t-62: 62px;
  --ds-t-46: 46px;
  --ds-t-42: 42px;
  --ds-t-34: 34px;
  --ds-t-30: 30px;
  --ds-t-24: 24px;
  --ds-t-19: 19px;
  --ds-t-17: 17px;
  --ds-t-15: 15px;
  --ds-t-14: 14px;
  --ds-t-13: 13px;
  --ds-t-12: 12px;
  --ds-t-11: 11px;

  /* Letter-spacing rapat untuk judul; makin besar ukuran makin rapat */
  --ds-ls-tightest: -.045em;  /* 62 / 46 / 42 */
  --ds-ls-tighter: -.035em;   /* 34 / 30 */
  --ds-ls-tight: -.025em;     /* 24 / 19 */
  --ds-ls-snug: -.02em;       /* 17 / 15 */

  /* Bobot: 600 untuk judul, 700 HANYA untuk wordmark */
  --ds-w-reg: 400;
  --ds-w-med: 500;
  --ds-w-head: 600;
  --ds-w-wordmark: 700;

  /* Target sentuh minimum */
  --ds-touch: 44px;
}

/* ==========================================================================
   Angka selalu tabular supaya kolom angka tidak bergeser.
   ========================================================================== */
.ds-num,
[data-ds-num],
.ds-tabel td,
.ds-tabel th {
  font-variant-numeric: tabular-nums;
}