/* ============================================================================
   Eclyzer AI — Token tema bersama (SATU-SATUNYA sumber warna)
   ----------------------------------------------------------------------------
   Addendum PROMPT-DSH-PERBAIKAN-UI.md (8 Oktober 2026): palet diselaraskan
   dengan https://eclyzer.site. Nilai referensi diverifikasi langsung dari
   D:\0-EclyzerSite\1-Landing\src\style.css baris 4.

   Urutan muat: theme.css HARUS dimuat sebelum style.css halaman mana pun.
   File ini hanya berisi token — tidak ada aturan komponen di sini.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Palet referensi eclyzer.site (mode gelap) ---- */
  --black: #050506;
  --bg: #0a0a0b;
  --surface: #131417;
  --charcoal: #16171a;
  --graphite: #1d1f23;
  --ink: #ececee;
  --silver: #b8bcc4;
  --muted: #9a9ea6;
  --dim: #6f737b;
  --accent: #4f8cff;
  --accent-soft: #8ab4ff;
  --accent-rgb: 79, 140, 255;
  /* Warna aksen untuk teks di atas lencana `rgba(accent, 0.16)`. Aksen utama
     pada latar tint hanya 4.48:1 (di bawah 4.5:1), jadi lencana memakai
     varian yang lebih terang di mode gelap dan lebih gelap di mode terang. */
  --accent-on-tint: #8ab4ff;
  --accent-glow: 0 0 20px rgba(79, 140, 255, 0.18);
  --line: #ffffff14;

  /* ---- Alias peran aplikasi (dipakai seluruh stylesheet existing) ---- */
  --surface-hover: #1b1d21;
  --surface-press: #24272d;
  --surface-selected: #292c32;
  --button-primary: #2b2e34;
  --button-primary-hover: #202227;
  --button-primary-fg: #ececee;
  --bg-base: var(--bg);
  --bg-sidebar: var(--surface); /* sidebar sedikit lebih terang dari utama */
  --bg-panel: var(--surface);
  --bg-soft: var(--charcoal);
  --bg-elevated: var(--graphite);
  --bg-input: var(--charcoal);

  --text-main: var(--ink);
  --text-secondary: var(--silver);
  --text-muted: var(--muted);
  --text-dim: var(--dim);

  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.16);
  --border-soft: rgba(255, 255, 255, 0.06);

  /* Tint netral untuk permukaan dekoratif (kutipan, panel proses).
     Biru HANYA untuk state aktif/fokus/link/aksi — lihat addendum §1. */
  --tint-rgb: 255, 255, 255;

  /* Tombol solid monokrom mengikuti pola referensi
     (`.button-primary{background:var(--ink);color:#131416}`):
     latar memakai --ink, teks memakai --solid-fg agar kontras terjaga
     di kedua tema tanpa menulis ulang warna. */
  --solid-fg: var(--bg);

  /* Merah status di mode gelap sengaja lebih terang dari #ef4444: teks merah
     di atas lencana `rgba(danger,0.1)` hanya mencapai 4.47:1, di bawah ambang
     WCAG AA 4.5:1. #f87171 menaikkannya ke ~6.2:1 tanpa kehilangan makna. */
  --danger: #f87171;
  --danger-rgb: 248, 113, 113;
  --success: #10b981;
  --success-rgb: 16, 185, 129;
  --amber: #f59e0b;
  --amber-rgb: 245, 158, 11;

  --shadow: rgba(0, 0, 0, 0.42);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.34);
  --shadow-popover: 0 22px 60px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);

  /* Wordmark monokrom netral — tanpa gradient dekoratif berwarna. */
  --brand-gradient: linear-gradient(135deg, #ececee 0%, #b8bcc4 100%);
  --glass: rgba(19, 20, 23, 0.72);

  /* ---- Tipografi & bentuk (dipakai bersama semua halaman) ---- */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-brand: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --transition-fast: all 0.15s ease;
  --transition-smooth: all 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);

  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
}

/* ==========================================================================
   Mode terang — turunan netral dari keluarga warna yang sama.
   Website referensi hanya ber-mode gelap; token ini TIDAK diklaim berasal
   dari eclyzer.site, melainkan diturunkan agar konsisten (addendum §1).
   ========================================================================== */
body.theme-light {
  --surface-hover: #e4e7ed;
  --surface-press: #d8dce3;
  --surface-selected: #eef0f4;
  --button-primary: #26282d;
  --button-primary-hover: #191b1f;
  --button-primary-fg: #ffffff;
  color-scheme: light;

  --bg: #ffffff;
  --surface: #f7f8fa;
  --charcoal: #f1f3f6;
  --graphite: #ffffff;
  --ink: #0a0a0b;
  --silver: #3f4147;
  /* Disetel dari #6f737b: di atas --charcoal #f1f3f6 hanya mencapai 4.28:1,
     di bawah ambang WCAG AA 4.5:1 untuk teks kecil. #5c6068 memberi ~5.6:1. */
  --muted: #5c6068;
  --dim: #7c8088;
  --accent: #2563eb;
  --accent-soft: #4f8cff;
  --accent-rgb: 37, 99, 235;
  --accent-on-tint: #1d4ed8;
  --accent-glow: 0 0 20px rgba(37, 99, 235, 0.16);
  --line: rgba(10, 10, 11, 0.1);

  --bg-base: var(--bg);
  --bg-sidebar: var(--surface); /* sidebar sedikit lebih gelap dari utama */
  --bg-panel: var(--graphite);
  --bg-soft: var(--charcoal);
  --bg-elevated: var(--graphite);
  --bg-input: var(--charcoal);

  --text-main: var(--ink);
  --text-secondary: var(--silver);
  --text-muted: var(--muted);
  --text-dim: var(--dim);

  --border: rgba(10, 10, 11, 0.1);
  --border-hover: rgba(10, 10, 11, 0.18);
  --border-soft: rgba(10, 10, 11, 0.06);

  --tint-rgb: 10, 10, 11;

  --solid-fg: var(--bg);

  /* Warna status mode terang digelapkan dari varian Tailwind 600 ke 800.
     Lencana memakai latar `rgba(warna, 0.1)` di atas permukaan terang sehingga
     warna utama ikut mengubah latarnya: varian 600 hanya mencapai 2.9–4.5:1
     dan varian 700 masih 4.38:1 pada lencana amber. Varian 800 memberi
     >=4.5:1 di seluruh kombinasi lencana. */
  --danger: #991b1b;
  --danger-rgb: 153, 27, 27;
  --success: #065f46;
  --success-rgb: 6, 95, 70;
  --amber: #92400e;
  --amber-rgb: 146, 64, 14;

  --shadow: rgba(10, 10, 11, 0.06);
  --shadow-soft: 0 12px 28px rgba(10, 10, 11, 0.07);
  --shadow-popover: 0 18px 50px rgba(10, 10, 11, 0.12);
  --shadow-lg: 0 20px 60px rgba(10, 10, 11, 0.14);

  --brand-gradient: linear-gradient(135deg, #0a0a0b 0%, #3f4147 100%);
  --glass: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   Kontrol native — memperbaiki temuan audit #4
   (#docs-sort-select putih dengan teks hitam pada dark mode).
   Spesifisitas elemen (0,0,1) sengaja rendah agar aturan kelas halaman
   tetap menang; yang penting `color-scheme` + warna dasar popup native.
   ========================================================================== */
select,
input,
textarea,
button {
  color-scheme: inherit;
  font-family: inherit;
}

/* Dasar kontrol memakai :where() → spesifisitas 0. Sebelumnya selector
   `input:not(..):not(..):not(..)` bernilai (0,3,1) sehingga mengalahkan setiap
   kelas komponen (mis. `.ec-input`) dan memaksa tumpukan override. Sekarang
   hanya berlaku bila komponen tidak mengatur apa pun. */
:where(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea) {
  background-color: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border);
}

select option,
select optgroup {
  background-color: var(--bg-elevated);
  color: var(--text-main);
}

/* Pemilih tanggal native: ikon kalender mengikuti tema. */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
}

:root:not(.theme-light) input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* ==========================================================================
   Token sintaks kode — koreksi kontras WCAG.
   Tema highlight.js `github.min.css` mewarnai `.hljs-built_in` dengan
   #e36209 di atas latar kode terang; itu hanya 2.75:1 dan gagal ambang 4.5:1.
   Warna digelapkan secukupnya khusus di mode terang. Mode gelap memakai
   github-dark.min.css (#ffa657) yang sudah lolos, jadi tidak disentuh.
   ========================================================================== */
body.theme-light .hljs-built_in,
body.theme-light .hljs-symbol {
  color: #9a3d00;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-dim);
  opacity: 1;
}