/* ==========================================================================
   Design tokens — CV Wahana Seni Promotion
   Warna brand diambil dari piksel logo asli, bukan dari CSS situs lama.
   Tipografi mengikuti H1 switchblade-awwwards.vercel.app (Barlow Black).
   Tema terang: putih dominan, hijau sebagai aksen utama.
   ========================================================================== */

:root {
  /* --- Warna brand (dari logo) ---
     Dipakai untuk BIDANG BERWARNA (tombol, badge, isian).
     Untuk TEKS di atas putih, pakai varian --text di bawahnya: hijau dan merah
     brand kontrasnya hanya 2,7:1 dan 4,4:1 terhadap putih, belum lolos WCAG AA
     untuk teks kecil. */
  /* Aksen sekarang MERAH, bukan hijau (permintaan Adelia 2026-11-05).
     Namanya dibuat netral (`accent`) supaya tidak berbohong kalau nanti
     berubah lagi. Hijau logo tetap ada sebagai --wh-green-logo kalau
     sewaktu-waktu dibutuhkan.

     Disiplin kontras sama seperti sebelumnya — merah terang #ED1C24 hanya
     4,38:1 di atas putih, jadi ia TIDAK boleh dipakai untuk teks kecil:

       --wh-accent       4,38:1  hanya bidang berwarna + teks besar
       --wh-accent-deep  6,14:1  teks putih di atasnya aman (6,14:1)
       --wh-accent-text  7,13:1  teks kecil */
  --wh-accent:         #ED1C24;
  --wh-accent-bright:  #FF3B42;
  --wh-accent-deep:    #C2151C;   /* teks putih di atasnya — kontras 6,1:1 */
  --wh-accent-text:    #B01219;   /* teks kecil — kontras 7,1:1 */
  --wh-green-logo:     #39B54A;   /* hijau logo, tidak dipakai sebagai aksen */
  --wh-red:            #ED1C24;
  --wh-red-bright:     #FF3B42;
  --wh-red-deep:       #C2151C;
  --wh-red-text:       #B01219;   /* teks kecil — kontras 6,0:1 */

  /* --- Permukaan ---
     base   = kanvas utama, putih
     alt    = pita selang-seling, abu sangat muda
     band   = pita penanda (section Proses), sedikit lebih dalam
     surface= kartu yang naik di atas kanvas */
  --wh-bg:             #FFFFFF;
  --wh-bg-alt:         #F7F6F3;
  --wh-band:           #F1EFE9;
  --wh-surface:        #FFFFFF;

  /* --- Garis --- */
  --wh-line:           #E6E3DC;
  --wh-line-strong:    #D2CDC3;

  /* --- Teks --- */
  --wh-text:           #121212;
  --wh-text-soft:      #55524C;
  --wh-text-faint:     #827D74;

  /* --- Utilitas --- */
  --wh-whatsapp:       #25D366;
  --wh-shadow:         0 1px 2px rgba(18, 18, 18, 0.04),
                       0 8px 24px rgba(18, 18, 18, 0.06);
  --wh-shadow-lift:    0 2px 4px rgba(18, 18, 18, 0.05),
                       0 14px 34px rgba(18, 18, 18, 0.10);

  /* --- Tipografi --- */
  /* Dua keluarga, dua peran.

     DISPLAY — Helvetica. TIDAK di-embed: berkas di helvetica.zip itu font
     Monotype berbayar, dan memasangnya lewat @font-face di situs komersial
     butuh lisensi web yang dibeli terpisah. Yang dipakai di sini tumpukan
     font sistem: di macOS/iOS browser memakai Helvetica Neue asli, di
     Windows dan Android jatuh ke Arimo — klon metrik Helvetica/Arial
     berlisensi OFL yang dimuat dari Google Fonts. Tidak ada berkas berlisensi
     yang didistribusikan, dan hasilnya tetap grotesque netral di semua
     perangkat.

     Kalau Adelia membeli lisensi web Helvetica, tinggal tambahkan
     @font-face-nya dan taruh "Helvetica Now"/"Helvetica Neue" di depan.

     BODY — Montserrat untuk sub-head, isi, dan UI. */
  --wh-font-display: "Helvetica Neue", Helvetica, "Arimo", Arial, sans-serif;
  --wh-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Skala heading — kembali ke spesifikasi H1 switchblade.
     v0.4.0 sempat menaikkannya ke 128px dan itu terlalu besar; dikembalikan
     di v0.5.0. Karakternya tetap: Barlow 900, lh 0.92, ls -0.01em. */
  --wh-h1-size:   clamp(36px, 4.6vw, 64px);
  --wh-h1-lh:     calc(.92em + 3pt);
  --wh-h1-ls:     -0.01em;

  --wh-h2-size:   clamp(29px, 3.4vw, 48px);
  --wh-h3-size:   clamp(20px, 2.2vw, 26px);
  --wh-h4-size:   clamp(17px, 1.6vw, 19px);
  --wh-body-size: 17px;
  --wh-small:     14px;
  --wh-micro:     12px;

  /* Kutipan satu layar penuh — paling besar di situs, tapi tetap terkendali. */
  --wh-quote-size: clamp(26px, 3.2vw, 46px);

  /* --- Ritme & bentuk --- */
  --wh-radius:      6px;   /* atomato: 5–7px. Tajam, bukan bulat. */
  --wh-radius-sm:   6px;

  /* Tidak ada lagi patokan lebar isi. Shell mengikuti lebar layar dengan
     margin kiri-kanan yang tetap, pola yang dipakai bluntumbrellas.com.
     Patokan 1440px yang lama membuat seluruh halaman — terutama katalog —
     menciut ke tengah saat layar lebar atau browser di-zoom out.

     Panjang baris teks tetap dijaga, tapi per komponen yang memang butuh
     (.wh-prose 72ch, .wh-hero__lead 48ch, .wh-quotes__item 1180px,
     .wh-shell--tight 980px) — bukan oleh shell yang mengurung semuanya. */
  /* Tinggi header sticky. Dipakai hero untuk menghitung "satu layar penuh":
     header ikut mengambil tempat di aliran dokumen, jadi 100svh polos membuat
     kaki hero (strip logo) terdorong ke bawah lipatan. */
  --wh-header-h:    76px;
  --wh-shell-tight: 980px;
  --wh-gutter:      clamp(20px, 4vw, 64px);
  --wh-section:     clamp(76px, 10vw, 148px);

  /* --- Motion --- */
  --wh-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --wh-fast:   160ms;
  --wh-normal: 320ms;
}