/* ==========================================================================
   Design token — syarif.com
   --------------------------------------------------------------------------
   Diratakan (flattened) dari desain-web/: sistem "Organic" bawaan Claude
   Design + seluruh pass override di desain-web/site.css. Di file asli, token
   yang sama dideklarasikan berulang kali dan yang menang adalah deklarasi
   TERAKHIR. Di sini hanya nilai final yang ditulis, sekali saja.

   Mau ganti tampilan seluruh situs? Ubah nilai di blok :root ini. Jangan
   pernah menulis hex, ukuran px, atau nama font langsung di template PHP.
   ========================================================================== */

:root {
  /* — peran warna — */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #222831;
  --color-accent: #00adb5;   /* teal */
  --color-accent-2: #222831; /* slate */
  --color-divider: #e4e4e4;

  /* — tangga nada (tonal ramp) 100–900 —
     Langkah yang sama pada ramp berbeda punya bobot visual yang sama.
     100–300 untuk isian/hover halus, 500 nilai dasar, 700–900 untuk teks
     di atas isian bernada dan state ditekan. */
  --color-accent-100: #eeeeee;
  --color-accent-200: #d6f0f2;
  --color-accent-300: #7fd8dc;
  --color-accent-400: #2cc2c9;
  --color-accent-500: #00adb5;
  --color-accent-600: #009197;
  --color-accent-700: #007e84;
  --color-accent-800: #005d61;
  --color-accent-900: #003d40;

  --color-accent-2-100: #eeeeee;
  --color-accent-2-200: #e0e2e4;
  --color-accent-2-300: #c3c6ca;
  --color-accent-2-400: #8b9098;
  --color-accent-2-500: #575e66;
  --color-accent-2-600: #393e46;
  --color-accent-2-700: #2d323a;
  --color-accent-2-800: #222831;
  --color-accent-2-900: #171b21;

  --color-neutral-100: #f7f7f7;
  --color-neutral-200: #eeeeee;
  --color-neutral-300: #e4e4e4;
  --color-neutral-400: #bfc2c6;
  --color-neutral-500: #9aa0a6;
  --color-neutral-600: #6c727a;
  --color-neutral-700: #4a5058;
  --color-neutral-800: #393e46;
  --color-neutral-900: #222831;

  /* — tipografi — */
  --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-weight: 800;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* — spasi — */
  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  /* — radius: nyaris siku, sesuai editorial pass — */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 3px;

  /* — elevasi: dipakai hemat; kartu memakai garis 1px, bukan bayangan — */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #222831 12%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #222831 14%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #222831 20%, transparent);

  /* — layout — */
  --wrap-max: 1180px;
  --wrap-pad: 24px;
  --header-h: 78px;

  /* — motion: dipakai semua transisi & animasi supaya bisa dimatikan serentak — */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.16s;
  --dur: 0.32s;
  --dur-slow: 0.7s;

  /* Tirai preloader. Kurvanya sengaja beda dari --ease: berangkat lambat,
     melesat di tengah, berhenti tegas — gerak "panel", bukan gerak "UI". */
  --ease-tirai: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-tirai: 0.9s;
  --dur-tirai-cepat: 0.62s;
}

/* Hormati setelan sistem pengguna. Semua animasi di app.js juga mengecek ini. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-tirai: 0.01ms;
    --dur-tirai-cepat: 0.01ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}