/* =========================================================
   ALMIWA TOUR — Design tokens
   Sumber: panduan-warna-almiwa.md (Almiwa Manifest System 8.9n)
   JANGAN pakai kode warna mentah di komponen; selalu var(--token).
   ========================================================= */
:root {
  color-scheme: light;
  /* Permukaan & garis */
  --page: #FBF7F0; --surface: #FFFFFF; --surface-2: #FEF8EE; --surface-3: #F6EADA; --line: #EBDDC9; --line-2: #DCC7AA; --line-input: #CDB592;
  /* Teks */
  --ink: #2E1604; --ink-2: #5A3A1A; --muted: #735A40; --faint: #7A6046; --brand-ink: #6E3A08;
  /* Brand */
  --espresso: #3A2211; --bronze: #9A5A1C; --gold: #C47A2C; --gold-soft: #F0B556; --gold-line: #D4A24E; --cream: #FEEED9; --cream-50: #FFF7EC; --accent: #E0322B;
  /* Gradasi emas (tombol utama) */
  --emas-1: #FBE9B7; --emas-2: #F3D48E; --emas-3: #E9BF6C; --emas-4: #DDAE57; --on-emas: #2E1404;
  /* Sidebar & menu aktif */
  --sidebar-atas: #FFF4DC; --sidebar-tengah: #FFEDC7; --sidebar-bawah: #FBE3B6; --on-sidebar: #2E1604; --nav-aktif-1: #00785F; --nav-aktif-2: #006D58; --on-nav-aktif: #FFF3DC;
  /* Status */
  --ok: #006D58; --ok-bg: #E3F3EE; --ok-line: #B3DCCF; --teal: #0B8270; --warn: #8F5300; --warn-bg: #FCF0D9; --warn-line: #F0D6A3; --bad: #B42F25; --bad-bg: #FCE9E6; --bad-line: #F3C3BC; --info: #285B87; --info-bg: #E7EFF7; --info-line: #C3D6EA; --neu: #5F5850; --neu-bg: #EFEDE9; --pink: #8E2F5C; --pink-bg: #F7E6EE;
  /* Warna paket */
  --pk-1: #C62828; --pk-2: #1E5BD7; --pk-3: #D97706; --pk-4: #15803D; --pk-5: #7E3AF2; --pk-6: #BE185D; --pk-7: #8B5A2B; --pk-8: #475569;
  /* Bayangan */
  --sh-1: 0 1px 2px rgba(74,42,16,.06);
  --sh-2: 0 1px 2px rgba(74,42,16,.05), 0 14px 32px -18px rgba(74,42,16,.28);
  --sh-3: 0 2px 8px rgba(42,26,13,.10), 0 28px 60px -24px rgba(42,26,13,.42);
  --glow-gold: 0 8px 20px -10px rgba(201,154,75,.75), inset 0 1px 0 rgba(255,255,255,.6);
  /* Bentuk */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Huruf isi mengikuti referensi Payung Madinah (Poppins 300); judul tetap Plus Jakarta Sans */
  --body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Token gerak & tata letak (ditiru dari referensi Payung Madinah) ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --max: 1180px;
  --nav-h: 76px;

  /* ---- Token khusus hero (diturunkan dari palet, tetap cokelat-krem) ---- */
  --hero-sky-1: #FFF7EC;   /* = cream-50 */
  --hero-sky-2: #FBE3B6;   /* = sidebar-bawah */
  --hero-sky-3: #F0B556;   /* = gold-soft */
  --hero-sun: #E9BF6C;     /* = emas-3 */
  --hero-far: #DCC7AA;     /* = line-2 */
  --hero-mid: #9A5A1C;     /* = bronze */
  --hero-near: #3A2211;    /* = espresso */
  --glass: rgba(255,255,255,.76);
  --glass-line: rgba(255,255,255,.92);
  /* ---- Blok gelap tetap (footer, konsultasi, 'belum termasuk') — sama di dua tema ---- */
  --deep-1: #231408;   /* = sidebar-tengah gelap */
  --deep-2: #120D09;   /* = page gelap */
  --on-deep: #F4EADB;  /* = ink gelap */
  --on-deep-2: #DCCBB3;/* = ink-2 gelap */
  --on-deep-3: #AE9B82;/* = muted gelap */
  --deep-line: rgba(232,199,126,.16);
}

/* Mode gelap: ikut pengaturan perangkat, kecuali pengguna memilih terang */
@media (prefers-color-scheme: dark) {
 :root:not([data-tema="terang"]) {
  color-scheme: dark;
  --page: #120D09; --surface: #1B1510; --surface-2: #221A13; --surface-3: #2D2319; --line: #382C21; --line-2: #4A3B2D; --line-input: #5C4936;
  --ink: #F4EADB; --ink-2: #DCCBB3; --muted: #AE9B82; --faint: #A08D74; --brand-ink: #F0B556;
  --espresso: #3A2211; --bronze: #D7A65B; --gold: #C47A2C; --gold-soft: #F0B556; --gold-line: #D4A24E; --cream: rgba(232,199,126,.15); --cream-50: rgba(232,199,126,.07); --accent: #E0322B;
  --emas-1: #FBE9B7; --emas-2: #F3D48E; --emas-3: #E9BF6C; --emas-4: #DDAE57; --on-emas: #2E1404;
  --sidebar-atas: #1E1107; --sidebar-tengah: #231408; --sidebar-bawah: #261608; --on-sidebar: #FFF3DC; --nav-aktif-1: rgba(0,163,131,.45); --nav-aktif-2: rgba(0,109,88,.35); --on-nav-aktif: #FFF3DC;
  --ok: #55D4AA; --ok-bg: rgba(85,212,170,.12); --ok-line: rgba(85,212,170,.32); --teal: #0B8270; --warn: #F3B862; --warn-bg: rgba(243,184,98,.12); --warn-line: rgba(243,184,98,.32); --bad: #FF8F80; --bad-bg: rgba(255,143,128,.12); --bad-line: rgba(255,143,128,.32); --info: #94BFEA; --info-bg: rgba(148,191,234,.12); --info-line: rgba(148,191,234,.3); --neu: #C8B9A6; --neu-bg: rgba(200,185,166,.12); --pink: #F2A3C6; --pink-bg: rgba(242,163,198,.13);
  --pk-1: #F87171; --pk-2: #6EA8FE; --pk-3: #FBBF24; --pk-4: #4ADE80; --pk-5: #B794F6; --pk-6: #F472B6; --pk-7: #D6A26E; --pk-8: #A3B3C8;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 1px 2px rgba(0,0,0,.35), 0 16px 34px -18px rgba(0,0,0,.7);
  --sh-3: 0 2px 8px rgba(0,0,0,.45), 0 30px 60px -20px rgba(0,0,0,.8);
  --glow-gold: 0 8px 20px -10px rgba(201,154,75,.75), inset 0 1px 0 rgba(255,255,255,.6);
  --hero-sky-1: #120D09; --hero-sky-2: #261608; --hero-sky-3: #6E3A08; --hero-sun: #F0B556;
  --hero-far: #4A3B2D; --hero-mid: #2D2319; --hero-near: #0B0805;
  --glass: rgba(27,21,16,.80); --glass-line: rgba(232,199,126,.16);
 }
}
/* Mode gelap: dipilih manual lewat tombol tema */
:root[data-tema="gelap"] {
  color-scheme: dark;
  --page: #120D09; --surface: #1B1510; --surface-2: #221A13; --surface-3: #2D2319; --line: #382C21; --line-2: #4A3B2D; --line-input: #5C4936;
  --ink: #F4EADB; --ink-2: #DCCBB3; --muted: #AE9B82; --faint: #A08D74; --brand-ink: #F0B556;
  --espresso: #3A2211; --bronze: #D7A65B; --gold: #C47A2C; --gold-soft: #F0B556; --gold-line: #D4A24E; --cream: rgba(232,199,126,.15); --cream-50: rgba(232,199,126,.07); --accent: #E0322B;
  --emas-1: #FBE9B7; --emas-2: #F3D48E; --emas-3: #E9BF6C; --emas-4: #DDAE57; --on-emas: #2E1404;
  --sidebar-atas: #1E1107; --sidebar-tengah: #231408; --sidebar-bawah: #261608; --on-sidebar: #FFF3DC; --nav-aktif-1: rgba(0,163,131,.45); --nav-aktif-2: rgba(0,109,88,.35); --on-nav-aktif: #FFF3DC;
  --ok: #55D4AA; --ok-bg: rgba(85,212,170,.12); --ok-line: rgba(85,212,170,.32); --teal: #0B8270; --warn: #F3B862; --warn-bg: rgba(243,184,98,.12); --warn-line: rgba(243,184,98,.32); --bad: #FF8F80; --bad-bg: rgba(255,143,128,.12); --bad-line: rgba(255,143,128,.32); --info: #94BFEA; --info-bg: rgba(148,191,234,.12); --info-line: rgba(148,191,234,.3); --neu: #C8B9A6; --neu-bg: rgba(200,185,166,.12); --pink: #F2A3C6; --pink-bg: rgba(242,163,198,.13);
  --pk-1: #F87171; --pk-2: #6EA8FE; --pk-3: #FBBF24; --pk-4: #4ADE80; --pk-5: #B794F6; --pk-6: #F472B6; --pk-7: #D6A26E; --pk-8: #A3B3C8;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 1px 2px rgba(0,0,0,.35), 0 16px 34px -18px rgba(0,0,0,.7);
  --sh-3: 0 2px 8px rgba(0,0,0,.45), 0 30px 60px -20px rgba(0,0,0,.8);
  --glow-gold: 0 8px 20px -10px rgba(201,154,75,.75), inset 0 1px 0 rgba(255,255,255,.6);
  --hero-sky-1: #120D09; --hero-sky-2: #261608; --hero-sky-3: #6E3A08; --hero-sun: #F0B556;
  --hero-far: #4A3B2D; --hero-mid: #2D2319; --hero-near: #0B0805;
  --glass: rgba(27,21,16,.80); --glass-line: rgba(232,199,126,.16);
}