/* =====================================================================================================
   Si Bull Design System — v1  (satu sumber token untuk Kota Si Bull & game "Dari Nampan ke Properti")
   Brand VIP: hitam hangat + emas, maskot Si Bull, phone-first. Salin file ini apa adanya ke repo game
   (mis. styles/ds.css) — JANGAN ubah token di salah satu sisi saja; naikkan versi & catat di DESIGN.md.
   Tema: gelap = bawaan Kota · terang (krem) = [data-tema="terang"], cocok dengan tampilan terang game.
   ===================================================================================================== */
:root {
  /* warna dasar (gelap) */
  --sb-bg: #0e0c09; --sb-bg-2: #17130d; --sb-bg-3: #211a11;
  --sb-surface: rgba(255, 236, 200, .045); --sb-surface-2: rgba(255, 236, 200, .08);
  --sb-line: rgba(242, 196, 90, .16); --sb-line-strong: rgba(242, 196, 90, .34);
  --sb-text: #f5ead2; --sb-muted: #b3a184; --sb-ink-on-gold: #1d1404;
  /* emas VIP (aksen utama) */
  --sb-gold: #e0b354; --sb-gold-bright: #f2c45a; --sb-gold-deep: #c9972f; --sb-gold-soft: rgba(224, 179, 84, .14);
  --sb-gold-grad: linear-gradient(135deg, #ffd978, #e0a43a);
  /* status */
  --sb-green: #5fd68a; --sb-green-soft: rgba(95, 214, 138, .14); --sb-red: #e8735a; --sb-red-soft: rgba(232, 115, 90, .14); --sb-info: #e8c77a;
  /* tipografi */
  --sb-font-display: 'Space Grotesk', system-ui, sans-serif;
  --sb-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sb-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --sb-fs-xs: 12.5px; --sb-fs-sm: 14px; --sb-fs: 16px; --sb-fs-lg: 18px; --sb-fs-h3: 20px; --sb-fs-h2: clamp(28px, 3.6vw, 40px); --sb-fs-h1: clamp(36px, 5.6vw, 64px);
  /* bentuk & jarak */
  --sb-r-sm: 10px; --sb-r: 14px; --sb-r-lg: 22px; --sb-r-xl: 28px; --sb-r-pill: 999px;
  --sb-s1: 4px; --sb-s2: 8px; --sb-s3: 12px; --sb-s4: 16px; --sb-s5: 24px; --sb-s6: 32px;
  --sb-tap: 44px; /* tinggi minimum area sentuh (phone-first) */
  --sb-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); --sb-shadow-gold: 0 8px 30px rgba(242, 196, 90, .28);
  --sb-focus: 0 0 0 3px rgba(242, 196, 90, .45); --sb-ease: .18s ease;
  color-scheme: dark;
}
[data-tema="terang"] {
  --sb-bg: #fdf6e9; --sb-bg-2: #f6ead2; --sb-bg-3: #efdfbf;
  --sb-surface: rgba(255, 255, 255, .7); --sb-surface-2: #fffaf0;
  --sb-line: #e8d5ae; --sb-line-strong: #d9c39a;
  --sb-text: #3b2a1a; --sb-muted: #7a6046; --sb-ink-on-gold: #3b2415;
  --sb-gold: #c9972f; --sb-gold-bright: #e8b84b; --sb-gold-deep: #8a6408; --sb-gold-soft: #f3d9a4;
  --sb-green: #2e7d32; --sb-green-soft: #dcefe0; --sb-red: #a4442c; --sb-red-soft: #fbe9e4; --sb-info: #8a6408;
  color-scheme: light;
}

/* ---------------- komponen dasar (awalan sb-, aman dipakai berdampingan dengan CSS lama) ---------------- */
.sb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sb-s2); min-height: var(--sb-tap); padding: 0 18px; border-radius: var(--sb-r-pill);
  font: 600 15px/1 var(--sb-font); border: 1px solid var(--sb-line); background: var(--sb-surface); color: var(--sb-text); text-decoration: none; cursor: pointer; transition: transform var(--sb-ease), box-shadow var(--sb-ease); }
.sb-btn:focus-visible { outline: none; box-shadow: var(--sb-focus); }
.sb-btn--gold { background: var(--sb-gold-grad); color: var(--sb-ink-on-gold); border-color: transparent; box-shadow: var(--sb-shadow-gold); }
.sb-card { background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: var(--sb-r-lg); padding: var(--sb-s4); }
.sb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--sb-r-pill); font: 600 var(--sb-fs-xs)/1.2 var(--sb-font); color: var(--sb-gold); background: var(--sb-gold-soft); border: 1px solid var(--sb-line-strong); }
/* Badge Warga — SATU bentuk di Kota & game: <span class="sb-warga">🐂 Warga #0001</span> · menunggu: tambah .sb-warga--tunggu */
.sb-warga { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: var(--sb-r-pill); font: 700 12.5px/1.2 var(--sb-font-mono); letter-spacing: .02em;
  color: var(--sb-ink-on-gold); background: var(--sb-gold-grad); box-shadow: 0 2px 10px rgba(242, 196, 90, .3); white-space: nowrap; }
.sb-warga--tunggu { background: var(--sb-gold-soft); color: var(--sb-gold); box-shadow: none; border: 1px dashed var(--sb-line-strong); }