/* =========================
   THEME TOKENS — LIGHT (DEFAULT)
   ========================= */
:root {
  --primary-font-color: #212529;
  --bg-color: #AEC6CF;

  --fontSize-heading-lg: 3rem;
  --fontSize-heading-base: 2.8rem;
  --fontSize-text-base: 1rem;

  --sacramento: Sacramento, cursive;
  --arabic: 'Noto Naskh Arabic', serif;

  --shadow-md: 0 0 10px rgba(0, 0, 0, 0.3);
  --transition-small: all .3s ease;

  --surface: #ffffff;
  --muted: #6c757d;
  --border: #e5e7eb;
  --accent: #0ea5e9;
  --overlay: rgba(0,0,0,0.5);

  /* FAB spacing */
  --fab-gap: 0.6rem;                      /* jarak antar tombol */
  --fab-bottom: clamp(5rem, 12vh, 7rem);  /* jarak dari bawah, responsif */

  /* Wave */
  --wave-color: #ffffff;
}

/* =========================
   THEME TOKENS — DARK (OVERRIDE)
   ========================= */
[data-theme="dark"] {
  --bg-color: #000000;
  --primary-font-color: #ffffff;

  --surface: #0b0b0b;
  --muted: #c7c7c7;
  --border: #1f2937;
  --accent: #38bdf8;
  --overlay: rgba(255,255,255,0.08);

  --shadow-md: 0 0 12px rgba(0, 0, 0, 0.6);

  /* Wave */
  --wave-color: #ffffff;
}

/* Optional: follow system when no manual theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-color: #000000;
    --primary-font-color: #ffffff;
    --surface: #0b0b0b;
    --muted: #c7c7c7;
    --border: #1f2937;
    --accent: #38bdf8;
    --overlay: rgba(255,255,255,0.08);
    --shadow-md: 0 0 12px rgba(0, 0, 0, 0.6);

    --wave-color: #888888;

    /* (opsional) bisa set default tab-color untuk mode ini juga */
  }
}

/* =========================
   BASE / RESET
   ========================= */
html {
  scroll-behavior: smooth;
  scrollbar-width: none !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

body {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--primary-font-color);
  background-color: var(--bg-color);
  overflow-y: hidden;        /* welcome screen terkunci */
}

body.active { overflow-y: auto; } /* setelah dibuka undangan */
body::-webkit-scrollbar { display: none; }

p { line-height: 1.7rem; }

/* =========================
   WRAPPER UNTUK TOGGLE + AUDIO (naik sedikit)
   ========================= */
.theme-audio-wrapper {
  position: fixed;
  right: 1rem;
  bottom: calc(var(--fab-bottom) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--fab-gap);
  z-index: 10000;
}

/* Desktop/layar lebar: turunin dikit supaya nggak terlalu tinggi */
@media (min-width: 1024px) {
  .theme-audio-wrapper { bottom: 2rem; }
}

/* =========================
   THEME TOGGLE BUTTON
   - disembunyikan saat welcome (sebelum body.active)
   - muncul geser seperti tombol audio
   ========================= */
.theme-toggle {
  background: var(--surface);
  color: var(--primary-font-color);
  border: 1px solid var(--border);
  padding: .5rem .75rem;
  border-radius: .5rem;
  cursor: pointer;
  box-shadow: none;
  /* animasi slide in seperti audio */
  transform: translateX(200%);   /* sembunyi di kanan saat welcome */
  transition: 2s transform ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
  pointer-events: none;          /* tidak bisa diklik saat hidden */
}
.theme-toggle:hover {
  transform: translateX(0) translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* muncul setelah undangan dibuka */
body.active .theme-toggle,
.theme-toggle.show {             /* alternatif kalau kamu pakai .show via JS */
  transform: translateX(0);
  pointer-events: auto;
}

/* =========================
   AUDIO BUTTON
   ========================= */
.audio button {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background-color: var(--surface);
  color: var(--primary-font-color);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translateX(200%);   /* default tersembunyi */
  transition: 1.5s transform ease, background-color .2s ease, color .2s ease;
}

.audio button.show { transform: translateX(0); }
.audio button.active { animation: rotate 3s linear infinite; }

/* =========================
   ANIMATIONS
   ========================= */
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes upAndDown {
  0%, 100% { transform: translateY(-0.8rem); }
  50% { transform: translateY(0.8rem); }
}