/* MOTIONIN — tema "Sapphire": base putih + biru sapphire.
   Default terang (putih). Mode gelap navy-biru hanya lewat tombol di panel ([data-theme="dark"]).
   Kontras teks >= 4.5:1 di kedua mode. Merah hanya untuk pesan error. */

@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/PlusJakartaSans.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/assets/fonts/PlayfairDisplay-Italic.ttf") format("truetype"); font-weight: 400 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #f7f9ff; --panel: #ffffff; --panel2: #eef2fd; --panel3: #e2e9fa;
  --line: #e1e7f5; --line2: #cbd5ee;
  --text: #0b1b3f; --text-2: #33426a; --muted: #5d6b91;
  /* biru sapphire: tombol utama, kata kunci */
  --accent: #2448e8; --accent-hover: #1d3ccb; --accent-ink: #ffffff; --accent-text: #1f3fd0;
  --accent-glow: rgba(36, 72, 232, .28);
  /* biru muda pendamping: label, ikon, latar lembut */
  --blue: #4f7cff; --blue-text: #2a52d6; --blue-soft: rgba(36, 72, 232, .08);
  --ok: #13804f; --ok-bg: #dff5ea; --bad: #c62a3a; --bad-bg: #fde4e6; --warn: #925c06; --warn-bg: #fdf0d6;
  --link: #2a52d6; --sunken: #edf1fa; --shadow: rgba(11, 27, 63, .1);
  --glow: #dde7ff; --glow-2: #eef3ff;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070d1f; --panel: #0c1530; --panel2: #111d3d; --panel3: #18264d;
  --line: #1c2a52; --line2: #2a3b6b;
  --text: #eef2fb; --text-2: #c4cee6; --muted: #8e9bbd;
  --accent: #4d74ff; --accent-hover: #6a8aff; --accent-ink: #ffffff; --accent-text: #93abff;
  --accent-glow: rgba(77, 116, 255, .4);
  --blue: #6a9cff; --blue-text: #9dbcff; --blue-soft: rgba(77, 116, 255, .18);
  --ok: #3ddc97; --ok-bg: #0f2e22; --bad: #ff7a85; --bad-bg: #3a1220; --warn: #ffbe55; --warn-bg: #352812;
  --link: #9dbcff; --sunken: #050a18; --shadow: rgba(0, 3, 14, .55);
  --glow: #1a3399; --glow-2: #10225e;
}

body { background: var(--bg); color: var(--text); font-family: var(--sans); transition: background-color .2s ease, color .2s ease; }

/* tombol ganti tema (panel saja) */
.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; flex: none; transition: transform .12s cubic-bezier(.2,.8,.2,1), background .12s; }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { background: var(--panel3); } }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* tombol utama berpendar halus */
.btn.primary { box-shadow: 0 8px 26px -6px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .18); }