/* Tema gelap — semua lewat token, tidak ada komponen yang diubah. */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* kertas -> jelaga hangat */
  --paper: oklch(16.5% 0.004 60);
  --paper-2: oklch(19% 0.005 60);
  --paper-3: oklch(23% 0.006 62);
  --sheet: oklch(20% 0.005 60);

  /* tinta */
  --ink: oklch(96% 0.005 82);
  --ink-2: oklch(86% 0.006 74);
  --muted: oklch(73% 0.008 68);
  --rule: oklch(35% 0.01 62);

  /* aksen dinaikkan terangnya untuk latar gelap */
  --accent: oklch(72% 0.135 44);
  --accent-2: oklch(79% 0.1 56);
  --accent-soft: oklch(72% 0.135 44 / 0.2);
  --accent-ink: oklch(17% 0.012 42);
  --accent-edge: oklch(72% 0.135 44 / 0.34);
  --accent-edge-2: oklch(72% 0.135 44 / 0.38);
  --accent-edge-3: oklch(72% 0.135 44 / 0.44);
  --accent-edge-4: oklch(72% 0.135 44 / 0.48);

  /* lane disesuaikan agar tetap terbaca di gelap */
  --lane-1: oklch(72% 0.05 60);
  --lane-2: oklch(68% 0.12 30);
  --lane-3: oklch(80% 0.12 76);
  --lane-4: oklch(74% 0.09 14);

  /* bagian fisik */
  --rubber: oklch(60% 0.15 34);
  --rubber-hi: oklch(71% 0.13 42);
  --rubber-lo: oklch(48% 0.13 31);
  --umber: oklch(88% 0.02 70);
  --bezel: oklch(26% 0.012 62);
  --case: oklch(24% 0.011 62);

  /* cahaya: sorotan lebih tipis, bayangan lebih pekat */
  --hi: oklch(100% 0 0 / 0.08);
  --hi-strong: oklch(100% 0 0 / 0.1);
  --shade-1: oklch(0% 0 0 / 0.35);
  --shade-2: oklch(0% 0 0 / 0.45);
  --shade-3: oklch(0% 0 0 / 0.6);
  --scrim: oklch(8% 0.01 60 / 0.7);

  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.5), 0 18px 36px -20px oklch(0% 0 0 / 0.7);
  --shadow-lift: 0 2px 6px oklch(0% 0 0 / 0.5), 0 36px 72px -34px oklch(0% 0 0 / 0.8);

  --ok: oklch(74% 0.13 152);
  --ok-soft: oklch(74% 0.13 152 / 0.16);
  --ok-edge: oklch(74% 0.13 152 / 0.42);
  --bad: oklch(70% 0.16 28);
  --bad-soft: oklch(70% 0.16 28 / 0.16);
  --bad-hi: oklch(76% 0.16 28);
  --umber-hi: oklch(94% 0.018 70);

  --grid-16: oklch(100% 0 0 / 0.02);
  --grid-beat: oklch(100% 0 0 / 0.04);
  --grid-bar: oklch(100% 0 0 / 0.08);
  --grid-row: oklch(100% 0 0 / 0.025);

  /* tombol utama versi gelap: aksen lebih terang, bevel lebih tipis */
  --btn-top: oklch(74% 0.13 44);
  --btn-bottom: oklch(68% 0.13 42);
  --btn-top-hi: oklch(78% 0.12 46);
  --btn-bottom-hi: oklch(72% 0.13 44);
  --btn-bevel-hi: oklch(84% 0.1 50);
  --btn-bevel-lo: oklch(58% 0.13 38);
  --btn-glow: oklch(60% 0.13 42 / 0.7);
}

/* grain sedikit lebih halus di gelap */
:root[data-theme="dark"] body::before {
  opacity: 0.035;
}

/* di latar gelap huruf terasa lebih rapat: longgarkan sedikit */
:root[data-theme="dark"] body {
  letter-spacing: 0.002em;
  line-height: 1.6;
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3 {
  letter-spacing: -0.018em;
  font-weight: 500;
}

:root[data-theme="dark"] .view-hero__title {
  letter-spacing: -0.024em;
}

/* label & angka dinaikkan sedikit supaya tidak tenggelam */
:root[data-theme="dark"] .counter,
:root[data-theme="dark"] .zu-recent-meta,
:root[data-theme="dark"] .zu-detail-meta,
:root[data-theme="dark"] .zu-side-search-count,
:root[data-theme="dark"] .stored-keys-idx,
:root[data-theme="dark"] .stored-keys-provider,
:root[data-theme="dark"] .stored-keys-credits,
:root[data-theme="dark"] .player-time {
  font-size: 11.5px;
  color: var(--ink-2);
}

:root[data-theme="dark"] .form-group__label {
  color: var(--ink-2);
}

:root[data-theme="dark"] .pill {
  font-size: 11px;
}

/* state aktif harus sama tegasnya dengan tema terang */
:root[data-theme="dark"] .zu-type-btn--on,
:root[data-theme="dark"] .zu-gender-btn--on,
:root[data-theme="dark"] .zu-like-filter-btn--on {
  background: color-mix(in oklab, var(--accent) 18%, var(--sheet));
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-edge-3);
}

:root[data-theme="dark"] .zu-type-btn {
  color: var(--ink-2);
}

:root[data-theme="dark"] .zu-gender-btn {
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--rule);
  background: var(--paper-2);
}

:root[data-theme="dark"] .zu-like-filter-btn {
  color: var(--ink-2);
}

:root[data-theme="dark"] .result-placeholder {
  color: var(--ink-2);
}

:root[data-theme="dark"] .status-dot {
  background: var(--ink-2);
}

/* tepi kartu memakai garis, bukan sorotan putih */
:root[data-theme="dark"] .card {
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--rule);
}

:root[data-theme="dark"] .zu-compose-panel {
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--rule);
}

:root[data-theme="dark"] .form-actions {
  background: linear-gradient(to top, var(--sheet) 74%, var(--sheet-fade-dark));
}

:root[data-theme="dark"] .zu-cover-player__audio {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.4);
}

:root[data-theme="dark"] .env-banner {
  background: var(--paper-3);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--accent-edge-2);
}

/* placeholder ikut tinta sekunder terang */
:root[data-theme="dark"] .input::placeholder,
:root[data-theme="dark"] .textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* tombol tema */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  background: var(--sheet);
  color: var(--ink-2);
  font-size: var(--t-12);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.theme-toggle:hover {
  background: var(--paper-3);
  color: var(--ink);
}

.theme-toggle svg {
  width: 15px;
  height: 15px;
}

.theme-toggle__label {
  font-size: var(--t-11);
}