/* =========================================================
   DESIGN TOKENS
   Layout kini gaya "link-hub" mobile-first: kolom sempit,
   spacing padat, minim scroll. Ubah nilai di sini untuk
   mengubah tampilan seluruh situs.
========================================================= */
:root {
  /* --- Warna dasar --- */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #25282B;
  --ink-soft: #5E6368;
  --ink-faint: #8D9296;
  --line: #D9DCDD;

  /* --- Palet "swatch" desainer --- */
  --coral: #303438;
  --mustard: #6B7075;
  --teal: #9DA2A6;
  --navy: #202326;

  /* --- Tipografi --- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* --- Skala tipe (dipadatkan) --- */
  --fs-eyebrow: 0.72rem;
  --fs-body: 0.95rem;
  --fs-lg: 1.05rem;
  --fs-h3: 1.15rem;
  --fs-h2: 1.45rem;
  --fs-h1: 1.65rem;

  /* --- Spacing (dipadatkan dari versi sebelumnya) --- */
  --space-xs: 0.4rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 2.75rem;

  /* --- Bentuk & bayangan --- */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 100px;
  --shadow-card: 0 14px 30px -18px rgba(37, 40, 43, 0.3);
  --shadow-soft: 0 6px 18px -10px rgba(37, 40, 43, 0.15);

  /* --- Lebar halaman: kolom sempit ala link-in-bio, dipertahankan di desktop --- */
  --page-width: 560px;
}

/* =========================================================
   DARK MODE
   Diaktifkan lewat atribut data-theme="dark" di elemen <html>
   (diatur oleh js/theme.js). Hanya skala warna dasar yang
   dibalik - palet aksen (coral/mustard/teal/navy) dibiarkan
   sama karena sudah cukup kontras di kedua mode.
========================================================= */
:root[data-theme="dark"] {
  --bg: #17181A;
  --surface: #1F2123;
  --ink: #F2F3F4;
  --ink-soft: #B4B8BB;
  --ink-faint: #7C8083;
  --line: #33363A;
  --shadow-card: 0 14px 30px -18px rgba(0, 0, 0, 0.6);
  --shadow-soft: 0 6px 18px -10px rgba(0, 0, 0, 0.4);
}
