/* tokens.css — token desain dasar. Lihat design.md §6 untuk rasional palet. */

:root {
  /* --- Warna given (JANGAN diubah tanpa instruksi user) --- */
  --bg: #d6fff6;
  --primary: #231561;

  /* --- Turunan — DIKONFIRMASI user, final --- */
  --surface: #ffffff; /* panel/card */
  --surface-alt: #eafffa; /* varian lapis kedua, dipakai sesekali di atas surface putih */
  --text: #231561; /* = primary, dipakai sbg warna teks utama */
  --text-secondary: #5b4ea0; /* label, sub-heading, teks pendukung */
  --text-muted: #6f7c9a; /* teks redup/disabled, netral abu-kebiruan */
  --border: rgba(35, 21, 97, 0.14);
  --border-strong: rgba(35, 21, 97, 0.28);

  /* Aksen highlight (mis. penanda "waktu salat berikutnya") — SELALU
     opacity dari --primary, BUKAN warna ke-3 terpisah (keputusan user). */
  --accent-tint: rgba(35, 21, 97, 0.08);
  --accent-tint-strong: rgba(35, 21, 97, 0.16);
  --accent-glow: rgba(214, 255, 246, 0.97);

  /* Status kriteria hilal — DIKONFIRMASI user, final */
  --status-ok: #1e8f6f; /* positif/terpenuhi */
  --status-ok-bg: #e1f6ee;
  --status-ok-text: #146c52;
  --status-ok-border: #1e8f6f;

  --status-no: #b5543a; /* negatif/tidak terpenuhi */
  --status-no-bg: #fbeae4;
  --status-no-text: #8a3f28;
  --status-no-border: #b5543a;

  /* Peringatan/notice (mis. gagal geolocation) — turunan warm-amber netral,
     konsisten skala dengan --status-no tapi bukan status kriteria hilal. */
  --warn-bg: #fff6dd;
  --warn-text: #7a5b00;
  --warn-border: #f0dfa0;

  /* Teks/elemen DI ATAS permukaan gelap (hero card, dark-card) — dipakai
     saat background = var(--primary). Lihat design.md §9/Tahap 1.5. */
  --on-primary: #ffffff;
  --on-primary-dim: rgba(255, 255, 255, 0.66);
  --on-primary-faint: rgba(255, 255, 255, 0.45);
  --on-primary-tint: rgba(255, 255, 255, 0.1);
  --on-primary-tint-strong: rgba(255, 255, 255, 0.18);
  --on-primary-border: rgba(255, 255, 255, 0.16);

  /* --- Tipografi (zero-dependency, font sistem saja) --- */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace;

  /* --- Skala spasi (basis 4px) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --nav-height: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

button {
  font-family: inherit;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}