/* Badminton Club — LAPISAN DELTA di atas DS.
   Dipasang SESUDAH ../tokens.css dan ../typography.css. Isinya cuma yang beda:
   font family + warna brand. Sisanya (surface, text, semantic, radius, gap,
   seluruh tangga --text-*) tetap datang dari DS dan ikut berubah kalau DS berubah.

   Jangan menyalin token DS ke sini. Kalau butuh nilai baru yang belum ada di DS,
   tanya dulu — bukan bikin token tandingan.

   ── Kenapa sumbunya data-skin, BUKAN data-theme ──
   tokens.css memilih palet base lewat data-theme (dark/light/stockbit-web/…).
   Kalau data-theme diisi "badminton", tidak ada blok DS yang cocok, halaman
   jatuh ke :root = Unibit Dark dan terang/gelap jadi tidak bisa dipilih lagi.
   Jadi sumbunya dipisah: data-theme tetap milik DS, data-skin milik project.
   Spesifisitas :root[data-skin] (0,2,0) menang atas :root dan [data-font] (0,1,0).

   ── Tangga ukuran: data-font="bit", bukan "open" ──
   Blok bit di typography.css itu Open + 1 di tiap anak tangga (body-3b 14,
   body-5r 12, body-4b 13, ...). Itu yang dipakai app ini sejak 12 Sep 2026:
   13/11 terasa kekecilan di ponsel. Keluarga hurufnya TIDAK ikut jadi Bit Sans,
   karena --font-family di-override di bawah dengan spesifisitas yang lebih
   tinggi. Jadi: tangga Bit, huruf DM Sans.

   ── Kenapa cuma --font-family yang perlu di-override ──
   Token teks di typography.css ditulis `400 14px/20px var(--font-family)` dan
   dideklarasikan di :root (= <html>). Custom property disubstitusi PER ELEMEN,
   jadi selama --font-family juga di-override di <html> (bukan di <body>),
   ke-33 token --text-* ikut ganti huruf. Kalau override-nya ditaruh di <body>
   atau di selector lain, token --text-* yang diwarisi sudah terlanjur "dibakar"
   dengan Open Sans dan TIDAK akan berubah. */

/* Cuma dua bobot yang diminta, 400 dan 700, karena cuma itu yang dipakai
   seluruh token --text-*. Minta bobot yang tidak terpakai berarti menunggu
   berkas font yang tidak pernah digambar.
   opsz 9..40 itu sumbu optical size bawaan DM Sans: satu berkas melayani teks
   11px sampai judul, hurufnya menyesuaikan sendiri. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,700&display=swap');

:root[data-skin="badminton"] {
  /* ── Font ──
     Open Sans dipertahankan sebagai cadangan, bukan hiasan: dia sudah dimuat
     typography.css, jadi kalau Google Fonts lambat atau diblokir, halaman tetap
     jatuh ke huruf yang benar dan bukan ke Times bawaan browser. */
  --font-family: 'DM Sans', 'Open Sans', sans-serif;

  /* ── Brand ── hijau Wise, SATU rona per mode.
     Hijau Wise aslinya #9FE870 (hue 96). Warna itu SANGAT terang: di latar
     putih kontrasnya cuma 1.47, jadi mustahil dipakai sebagai tinta — garis
     chip, ikon tab aktif, dan garis bawah tab akan hilang. Wise sendiri
     memakainya sebagai ISIAN dengan teks gelap di atasnya, bukan sebagai tinta.

     Karena di app ini --brand dipakai dua-duanya (tinta DAN isian), yang
     dipertahankan adalah RONA-nya, dan terangnya disetel per mode:
       terang — #3C7B14, hue sama, kontras 5.20 di atas putih
       gelap  — #9FE870, hijau Wise apa adanya, kontras 11.19 di atas surface

     brand-low/med ikut sendiri karena diturunkan dari --brand-rgb. */
  /* Mode terang: hijau mint #21CE99 (diputuskan 14 Sep 2026, contoh dari user).
     Sebelumnya hijau Wise #9FE870 seperti mode gelap. Mode gelap tidak berubah.
     Teks di atas isian tetap gelap (--on-brand di bawah): putih di atas
     #21CE99 kontrasnya cuma sekitar 2, tidak terbaca. */
  --brand-rgb: 33 206 153;              /* #21CE99 */
  --brand:     rgb(var(--brand-rgb));
  --brand-low: rgb(var(--brand-rgb) / 12%);
  --brand-medium: rgb(var(--brand-rgb) / 30%);

  /* Warna teks/ikon DI ATAS isian brand. DS punya --white untuk peran ini, tapi
     --white cuma benar kalau brand-nya gelap. Di mode gelap ungunya terang, teks
     putih di atasnya cuma 3.13 — tidak kebaca. Jadi peran ini dipisah jadi token
     sendiri dan nilainya ikut mode. Nilainya bukan warna baru, cuma memilih
     antara dua token DS yang sudah ada. */
  /* Teks di atas isian hijau muda harus gelap: putih tidak terbaca. */
  --on-brand: var(--primary);

  /* Warna brand untuk TEKS (tombol teks, "3 new"). Mint #21CE99 di atas putih
     kontrasnya cuma sekitar 2; versi gelap ini sekitar 3.5 dan tetap terbaca
     mint. Isian dan garis aktif tetap memakai --brand. (14 Sep 2026) */
  --brand-ink: rgb(14 159 116);          /* #0E9F74 */
}

/* --positive / --negative SENGAJA tidak diubah: itu sumbu semantik (naik/turun,
   berhasil/gagal), bukan identitas merek. Di DS kebetulan --positive sewarna
   --brand; di sini keduanya jadi beda, dan memang begitu seharusnya. */

/* Mode gelap: rona sama, terangnya dinaikkan. Ditulis untuk semua mode gelap DS,
   bukan cuma "dark", supaya skin ini tidak jatuh ke nada terang kalau halaman
   dipindah ke stockbit-dark atau bibit-dark. */
:root[data-skin="badminton"][data-theme="dark"],
:root[data-skin="badminton"][data-theme="stockbit-dark"],
:root[data-skin="badminton"][data-theme="bibit-dark"] {
  --brand-rgb: 159 232 112;             /* #9FE870 — hijau Wise apa adanya */
  --on-brand: var(--artboard);          /* #121212 — putih kalah di hijau terang */
  --brand-ink: var(--brand);            /* di latar gelap hijau terang sudah terbaca */
}

/* Aksen selain hijau: teks brand = warna aksennya sendiri (nilainya sudah
   gelap di mode terang dan terang di mode gelap). */
:root[data-skin="badminton"][data-accent]:not([data-accent="green"]) { --brand-ink: rgb(var(--brand-rgb)); }

/* ── Warna aksen pilihan ──
   Hijau tetap bawaannya; tiga rona lain disediakan buat yang ingin klubnya
   terlihat lain. Yang diganti CUMA --brand-rgb dan --on-brand: seluruh app
   menurunkan warnanya dari dua token itu, jadi tidak ada satu pun komponen yang
   perlu tahu warna apa yang sedang dipilih.

   Tiap rona punya dua nilai seperti hijau: yang gelap untuk mode terang (dia
   dipakai sebagai TINTA — garis chip, ikon tab aktif), yang terang untuk mode
   gelap (di sana dia isian, dengan teks gelap di atasnya). Kontrasnya diukur
   di atas latar masing-masing, bukan dikira-kira:

     ungu   #6D3BC4 di putih 7.44 · #C4A6F5 di #121212 9.71
     biru   #1A5FB4 di putih 6.42 · #8FC0F5 di #121212 9.53
     merah  #A8296B di putih 6.85 · #F3A3CB di #121212 9.84
       muda */
:root[data-skin="badminton"][data-accent="purple"] { --brand-rgb: 109 59 196; --on-brand: var(--white); }
:root[data-skin="badminton"][data-accent="blue"]   { --brand-rgb: 26 95 180;  --on-brand: var(--white); }
:root[data-skin="badminton"][data-accent="pink"]   { --brand-rgb: 168 41 107; --on-brand: var(--white); }

:root[data-skin="badminton"][data-accent="purple"][data-theme="dark"],
:root[data-skin="badminton"][data-accent="purple"][data-theme="stockbit-dark"],
:root[data-skin="badminton"][data-accent="purple"][data-theme="bibit-dark"] {
  --brand-rgb: 196 166 245;
  --on-brand: var(--artboard);
}

:root[data-skin="badminton"][data-accent="blue"][data-theme="dark"],
:root[data-skin="badminton"][data-accent="blue"][data-theme="stockbit-dark"],
:root[data-skin="badminton"][data-accent="blue"][data-theme="bibit-dark"] {
  --brand-rgb: 143 192 245;
  --on-brand: var(--artboard);
}

:root[data-skin="badminton"][data-accent="pink"][data-theme="dark"],
:root[data-skin="badminton"][data-accent="pink"][data-theme="stockbit-dark"],
:root[data-skin="badminton"][data-accent="pink"][data-theme="bibit-dark"] {
  --brand-rgb: 243 163 203;
  --on-brand: var(--artboard);
}