/* ============================================================================
   themes.css — THEME ENGINE MuslimHub (fitur-rekomendasi-ubah-warna-layout.md)
   ----------------------------------------------------------------------------
   Setiap preset HANYA mendefinisikan 3 warna inti (bg / primary / accent) dari
   tabel rekomendasi; seluruh token lain (surface, text, muted, border, hover,
   soft, success, danger) DITURUNKAN OTOMATIS dengan color-mix() sehingga
   seluruh aplikasi (navbar, card, tombol, Quran, doa, jadwal, settings, modal)
   mengikuti tema tanpa menulis ulang CSS komponen.

   Mekanisme:
     html[data-color="<id"] { --c-bg; --c-primary; --c-accent }
     → :root menurunkan token umum dari --c-* bila data-color aktif.
     html[data-color="custom"] variabel --c-* diset inline dari JS (Custom Theme).
   ============================================================================ */

/* ---------- 1) Peta preset: 3 warna inti per tema ---------- */
html[data-color='emerald']     { --c-bg:#F6FBF8; --c-primary:#087F5B; --c-accent:#D4EDDF; }
html[data-color='mosque']      { --c-bg:#F8F6EF; --c-primary:#176B5B; --c-accent:#D4AF37; }
html[data-color='olive']       { --c-bg:#F7F7F0; --c-primary:#687344; --c-accent:#B7B76B; }
html[data-color='desert']      { --c-bg:#FBF5E9; --c-primary:#A66A2C; --c-accent:#D4A373; }
html[data-color='mushaf']      { --c-bg:#F7F0DC; --c-primary:#496B52; --c-accent:#B08D32; }
html[data-color='sage']        { --c-bg:#F4F7F2; --c-primary:#52796F; --c-accent:#CAD2C5; }
html[data-color='mint']        { --c-bg:#F0FDFA; --c-primary:#0F766E; --c-accent:#5EEAD4; }
html[data-color='forestnight'] { --c-bg:#101C17; --c-primary:#4ADE80; --c-accent:#D4AF37; }
html[data-color='ocean']       { --c-bg:#F3F8FC; --c-primary:#1261A0; --c-accent:#63B3ED; }
html[data-color='teal']        { --c-bg:#F0FAF9; --c-primary:#087F8C; --c-accent:#5BC0BE; }
html[data-color='sky']         { --c-bg:#F0F9FF; --c-primary:#0369A1; --c-accent:#7DD3FC; }
html[data-color='slate']       { --c-bg:#F8FAFC; --c-primary:#475569; --c-accent:#94A3B8; }
html[data-color='mocha']       { --c-bg:#FAF7F2; --c-primary:#795548; --c-accent:#C8A27A; }
html[data-color='lavender']    { --c-bg:#F8F6FC; --c-primary:#7057A5; --c-accent:#B8A4E3; }
html[data-color='rose']        { --c-bg:#FFF7F8; --c-primary:#A64D63; --c-accent:#E8A0B4; }
html[data-color='sunset']      { --c-bg:#FFF8F3; --c-primary:#C45A3C; --c-accent:#F2A65A; }
html[data-color='amber']       { --c-bg:#FFFBEB; --c-primary:#B7791F; --c-accent:#F6C453; }
html[data-color='midnight']    { --c-bg:#0F172A; --c-primary:#34D399; --c-accent:#FBBF24; }
html[data-color='charcoal']    { --c-bg:#18181B; --c-primary:#A1A1AA; --c-accent:#F4C95D; }
html[data-color='royalnight']  { --c-bg:#111827; --c-primary:#818CF8; --c-accent:#FBBF24; }
html[data-color='forestdark']  { --c-bg:#0D1712; --c-primary:#4ADE80; --c-accent:#B5A642; }
html[data-color='navynight']   { --c-bg:#0B1120; --c-primary:#60A5FA; --c-accent:#FACC15; }
html[data-color='purplenight'] { --c-bg:#171122; --c-primary:#C084FC; --c-accent:#F0ABFC; }
html[data-color='rosenight']   { --c-bg:#1F1418; --c-primary:#FB7185; --c-accent:#FDA4AF; }
html[data-color='coffeenight'] { --c-bg:#1C1917; --c-primary:#D6A77A; --c-accent:#F5D0A9; }
html[data-color='goldnight']   { --c-bg:#15120C; --c-primary:#D4AF37; --c-accent:#F5E6A8; }

/* ---------- 2) Penurunan token aplikasi dari 3 warna inti ---------- */
/* Bila preset aktif (data-color terpasang), token design-system yang selama
   ini berwarna tetap di-REMIX dari warna inti — komponen tak perlu diubah. */
html[data-color] {
  --bg-page: var(--c-bg);
  --bg-card: color-mix(in srgb, var(--c-bg) 60%, #FFFFFF);
  --green-900: color-mix(in srgb, var(--c-primary) 72%, #000000);
  --green-800: var(--c-primary);
  --green-700: color-mix(in srgb, var(--c-primary) 88%, #000000);
  --green-600: color-mix(in srgb, var(--c-primary) 92%, #FFFFFF);
  --green-500: color-mix(in srgb, var(--c-primary) 80%, #FFFFFF);
  --green-100: color-mix(in srgb, var(--c-primary) 18%, #FFFFFF);
  --green-50:  color-mix(in srgb, var(--c-primary) 8%,  #FFFFFF);
  --gold-500: var(--c-accent);
  --gold-100: color-mix(in srgb, var(--c-accent) 25%, #FFFFFF);
  --cream: color-mix(in srgb, var(--c-bg) 75%, #FFFFFF);
  --ink-900: color-mix(in srgb, var(--c-primary) 55%, #1A1A1A);
  --ink-700: color-mix(in srgb, var(--c-primary) 40%, #333333);
  --ink-500: color-mix(in srgb, var(--c-primary) 22%, #6B7280);
  --ink-300: color-mix(in srgb, var(--c-primary) 14%, #9CA3AF);
  --shadow-card: 0 10px 30px color-mix(in srgb, var(--c-primary) 10%, transparent),
                 0 2px 8px color-mix(in srgb, var(--c-primary) 6%, transparent);
  --shadow-float: 0 16px 40px color-mix(in srgb, var(--c-primary) 26%, transparent);
}

/* ---------- 3) Preset gelap: alihkan token ke varian gelap ---------- */
/* Preset dark memakai primary/accent TERANG di atas permukaan gelap. */
html[data-color][data-theme='dark'] {
  --bg-page: var(--c-bg);
  --bg-card: color-mix(in srgb, var(--c-bg) 80%, #FFFFFF);
  --green-900: #050807;
  --green-800: color-mix(in srgb, var(--c-primary) 45%, #000000);
  --green-700: color-mix(in srgb, var(--c-primary) 34%, #000000);
  --green-600: color-mix(in srgb, var(--c-primary) 70%, #101010);
  --green-500: var(--c-primary);
  --green-100: color-mix(in srgb, var(--c-primary) 30%, var(--c-bg));
  --green-50:  color-mix(in srgb, var(--c-primary) 16%, var(--c-bg));
  --gold-100: color-mix(in srgb, var(--c-accent) 22%, var(--c-bg));
  --cream: color-mix(in srgb, var(--c-bg) 92%, #FFFFFF);
  --ink-900: color-mix(in srgb, var(--c-primary) 35%, #FFFFFF);
  --ink-700: color-mix(in srgb, var(--c-primary) 26%, #D1D5DB);
  --ink-500: color-mix(in srgb, var(--c-primary) 30%, #9CA3AF);
  --ink-300: color-mix(in srgb, var(--c-primary) 24%, #6B7280);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-float: 0 16px 40px rgba(0, 0, 0, .55);
}

/* ---------- 4) Sentuhan khusus preset Mushaf (nuansa kertas) ---------- */
html[data-color='mushaf'] {
  --bg-card: #FDF9EF;
  --cream: #F3EAD2;
  --ink-900: #30281F;
  --ink-700: #4A3F31;
}

/* ---------- 5) UI pemilih tema (Pengaturan → Tampilan → Tema Warna) ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.theme-cat-title { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-500); margin: 14px 0 8px; }
.theme-card {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px;
  border: 1.5px solid var(--ink-300, #9AA8A0); border-radius: 12px;
  background: var(--bg-card, #fff); cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--ink-900, #101613); transition: transform .12s, box-shadow .12s, border-color .12s;
}
.theme-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.10); }
.theme-card.on { border-color: var(--green-600); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--green-600) 32%, transparent); }
.theme-swatch { width: 30px; height: 30px; border-radius: 9px; flex: none; border: 1px solid rgba(0,0,0,.12);
  background: linear-gradient(135deg, var(--sw-bg) 0 55%, var(--sw-primary) 55% 82%, var(--sw-accent) 82%); }
.theme-none .theme-swatch { background: conic-gradient(#f87171, #fbbf24, #34d399, #60a5fa, #c084fc, #f87171); }

/* ---------- 6) Custom theme builder ---------- */
.custom-theme-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.custom-theme-row label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-700); }
.custom-theme-row input[type='color'] { width: 38px; height: 30px; border: 1px solid var(--ink-300); border-radius: 8px; padding: 0; background: none; cursor: pointer; }