/*
 * Design token Batik Arkanza.
 *
 * Emas dan charcoal diambil langsung dari berkas logo resmi; sisanya diturunkan
 * dari dua warna itu supaya seluruh palet terasa satu keluarga. Jangan menulis
 * nilai warna mentah di berkas lain — tambahkan token di sini.
 */

:root {
  /* — Warna inti (dari logo) — */
  --ark-gold:        #C9A23D;
  --ark-ink:         #171D1D;

  /* — Turunan emas — */
  --ark-gold-dark:   #A8842C;  /* hover tombol */
  --ark-gold-deep:   #7E6320;  /* teks emas di atas terang, kontras aman */
  --ark-gold-soft:   #E3C98A;  /* garis & aksen tipis */
  --ark-gold-tint:   #F7F0DE;  /* latar blok lembut */

  /* — Turunan ink — */
  --ark-ink-800:     #232B2B;  /* latar gelap sekunder */
  --ark-ink-600:     #48514F;  /* teks sekunder */
  --ark-ink-400:     #7A8280;  /* teks tersier, caption */

  /* — Netral hangat — */
  --ark-cream:       #FAF7F0;
  --ark-line:        #E5E0D5;
  --ark-white:       #FFFFFF;

  /* — Peran (pakai ini di komponen, bukan warna mentah di atas) — */
  --ark-bg:          var(--ark-white);
  --ark-bg-alt:      var(--ark-cream);
  --ark-bg-dark:     var(--ark-ink);
  --ark-text:        var(--ark-ink);
  --ark-text-muted:  var(--ark-ink-600);
  --ark-text-on-dark:#F2EFE8;
  --ark-accent:      var(--ark-gold);
  --ark-border:      var(--ark-line);

  /* — WhatsApp (warna resmi, jangan diubah) — */
  --ark-wa:          #25D366;
  --ark-wa-dark:     #1EBE5A;

  /* — Tipografi — */
  --ark-font-display: "Jost", ui-sans-serif, system-ui, sans-serif;
  --ark-font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --ark-tracking-wide:  .18em;   /* eyebrow, label kecil */
  --ark-tracking-logo:  .30em;   /* meniru spasi wordmark */

  /* Skala tipografi — fluid, dipatok ke lebar layar 360px…1280px */
  --ark-fs-xs:   0.8125rem;
  --ark-fs-sm:   0.9375rem;
  --ark-fs-base: 1rem;
  --ark-fs-lg:   clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem);
  --ark-fs-xl:   clamp(1.25rem,  1.14rem + 0.48vw, 1.5rem);
  --ark-fs-2xl:  clamp(1.5rem,   1.31rem + 0.85vw, 2rem);
  --ark-fs-3xl:  clamp(1.875rem, 1.55rem + 1.41vw, 2.75rem);
  --ark-fs-4xl:  clamp(2.25rem,  1.71rem + 2.37vw, 3.75rem);

  --ark-leading-tight: 1.15;
  --ark-leading-snug:  1.35;
  --ark-leading-body:  1.65;

  /* — Spasi — skala 4px — */
  --ark-space-1:  0.25rem;
  --ark-space-2:  0.5rem;
  --ark-space-3:  0.75rem;
  --ark-space-4:  1rem;
  --ark-space-5:  1.5rem;
  --ark-space-6:  2rem;
  --ark-space-7:  3rem;
  --ark-space-8:  4rem;
  --ark-space-9:  6rem;

  /* Jarak antar-section, mengecil sendiri di mobile */
  --ark-section-y: clamp(3.5rem, 2.5rem + 4.4vw, 6.5rem);

  /* — Layout — */
  --ark-container:      1200px;
  --ark-container-text: 720px;   /* lebar nyaman untuk paragraf */
  --ark-gutter:         clamp(1rem, 0.6rem + 1.8vw, 2rem);

  /* — Radius — */
  --ark-radius-sm:   4px;
  --ark-radius:      8px;
  --ark-radius-lg:   16px;
  --ark-radius-full: 999px;

  /* — Bayangan — hangat, bukan abu-abu netral — */
  --ark-shadow-sm: 0 1px 2px rgba(23, 29, 29, .06);
  --ark-shadow:    0 4px 16px rgba(23, 29, 29, .08);
  --ark-shadow-lg: 0 12px 40px rgba(23, 29, 29, .12);

  /* — Gerak — */
  --ark-ease:       cubic-bezier(.4, 0, .2, 1);
  --ark-duration:   .2s;

  /* — Lapis — */
  --ark-z-header:   100;
  --ark-z-wa:       200;
  --ark-z-modal:    300;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ark-duration: .01ms; }
}