/* =============================================================================
   JPOWER — DESIGN TOKENS
   Satu sumber kebenaran untuk warna, jarak (spacing), tipografi, dan gerak.
   Semua komponen WAJIB memakai token ini — jangan tulis angka px mentah.
   ========================================================================== */

:root {
  /* ---------- Warna brand (dari kemasan AMP 10W-40 SL) ---------- */
  --brand-900: #26134d;
  --brand-800: #331a63;
  --brand-700: #5a2e94;
  --brand-600: #6f3bb0;
  --brand-500: #8b57cc;
  --accent:     #f26522;
  --accent-600: #d9531a;
  --accent-400: #ff8a4d;
  --accent-050: #fff1e8;
  --blue:       #7b3fb8;
  --wa:         #25d366;
  --wa-600:     #1fb457;

  /* ---------- Netral ---------- */
  --ink:       #0e1726;
  --ink-soft:  #33445c;
  --muted:     #5b6b82;
  --line:      #e4e9f0;
  --line-soft: #eef2f7;
  --bg:        #ffffff;
  --surface:   #f5f8fc;
  --surface-2: #eef3f9;
  --white:     #ffffff;

  /* ---------- Skala jarak (spacing) — kelipatan 4px ----------
     Dipakai untuk margin, padding, dan gap. Ini yang membuat
     jarak antar elemen terasa konsisten di seluruh website.      */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-7: 2rem;     /* 32px */
  --space-8: 2.5rem;   /* 40px */
  --space-9: 3rem;     /* 48px */
  --space-10: 4rem;    /* 64px */

  /* ---------- Tipografi (fluid) ---------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   clamp(1.05rem, 0.4vw + 0.95rem, 1.22rem);
  --text-xl:   clamp(1.15rem, 0.6vw + 1rem, 1.4rem);
  --text-2xl:  clamp(1.4rem, 1.2vw + 1.1rem, 1.85rem);
  --text-3xl:  clamp(1.6rem, 2.2vw + 1rem, 2.5rem);
  --text-4xl:  clamp(2.1rem, 4.2vw + 1rem, 3.5rem);

  --leading-tight: 1.12;
  --leading-snug:  1.35;
  --leading-normal: 1.6;

  /* ---------- Bentuk & bayangan ---------- */
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(14, 23, 38, .06), 0 1px 3px rgba(14, 23, 38, .08);
  --shadow-md: 0 6px 20px rgba(14, 23, 38, .10);
  --shadow-lg: 0 20px 50px rgba(10, 26, 47, .18);
  --shadow-glow: 0 10px 40px rgba(90, 46, 148, .28);

  /* ---------- Layout ---------- */
  --container: 1180px;
  --gap: clamp(var(--space-4), 3vw, var(--space-7));
  --section-y: clamp(var(--space-9), 7vw, var(--space-10));

  /* ---------- Gerak (motion) ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .16s;
  --dur: .28s;
  --dur-slow: .6s;
}

/* Hormati preferensi pengguna yang tidak nyaman dengan animasi */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: .01ms;
    --dur: .01ms;
    --dur-slow: .01ms;
  }
}