/* ==========================================================================
   THEME — Design tokens (single source of truth)
   Semua styling lain mengacu ke variabel di file ini.
   Ganti nilai di sini untuk re-brand seluruh halaman.
   ========================================================================== */

:root {
  color-scheme: dark; /* kontrol bawaan browser (scrollbar, slider) ikut gelap */

  /* ---- Color: surface & text ------------------------------------------- */
  --bg: #0a0a0a;            /* background halaman */
  --bg-soft: #101010;       /* background section alternatif */
  --surface-0: #131313;     /* navbar */
  --surface-1: #1c1c1c;     /* panel utama (kiri hero) */
  --surface-2: #232323;     /* kartu */
  --surface-3: #2c2c2c;     /* hover / elevated */
  --surface-4: #353535;     /* kontrol (scrollbar, track) */

  --ink: #f4f4f4;           /* teks utama */
  --ink-2: #ababab;         /* teks sekunder */
  --ink-3: #909090;         /* teks muted / caption */

  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.24);

  /* ---- Color: accent ---------------------------------------------------- */
  --accent: #d8ff3e;              /* acid lime — 1 warna aksen saja */
  --accent-2: #c2f522;            /* variasi untuk gradient/glow */
  --accent-ink: #0a0a0a;          /* teks di atas accent */
  --accent-soft: rgba(216, 255, 62, 0.12);
  --accent-line: rgba(216, 255, 62, 0.28);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --fs-display: clamp(2.6rem, 6.2vw, 5.1rem);  /* H1 hero */
  --fs-h1: clamp(2.1rem, 4.2vw, 3.4rem);       /* H2 section */
  --fs-h2: clamp(1.55rem, 2.4vw, 2.1rem);      /* H3 / card title */
  --fs-h3: 1.15rem;                             /* card title kecil */
  --fs-lead: clamp(1rem, 1.25vw, 1.12rem);     /* subheadline */
  --fs-body: 0.97rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-micro: 0.7rem;

  --lh-tight: 0.98;
  --lh-snug: 1.15;
  --lh-body: 1.65;

  --tracking-tight: -0.035em;
  --tracking-snug: -0.02em;
  --tracking-wide: 0.14em;

  /* ---- Space scale ------------------------------------------------------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --section-y: clamp(56px, 8vw, 112px);
  --gutter: clamp(20px, 4vw, 40px);
  --container: 1240px;

  /* ---- Radius ----------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ---- Elevation & glow ------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 18px 40px -18px rgba(0, 0, 0, 0.85);
  --shadow-3: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
  --shadow-accent: 0 18px 50px -16px rgba(216, 255, 62, 0.42);
  --ring: 0 0 0 3px rgba(216, 255, 62, 0.32);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 0.16s;
  --dur-2: 0.28s;
  --dur-3: 0.55s;

  /* ---- Layout ----------------------------------------------------------- */
  --nav-h: 72px;
  --z-nav: 90;      /* di atas drawer agar tombol close tetap bisa diklik */
  --z-drawer: 80;
}

/* Mode terang (opsional) — toggle dengan data-theme="light" pada <html> */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f0;
  --bg-soft: #ffffff;
  --surface-0: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f6f6f4;
  --surface-3: #eeeeeb;
  --surface-4: #dcdcd8;
  --ink: #101010;
  --ink-2: #4a4a4a;
  --ink-3: #6b6b6b;
  --line: rgba(0, 0, 0, 0.1);
  --line-2: rgba(0, 0, 0, 0.16);
  --line-3: rgba(0, 0, 0, 0.28);
  --accent-ink: #0a0a0a;
  --shadow-2: 0 18px 40px -22px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 40px 90px -45px rgba(0, 0, 0, 0.4);
}