/* ============================================================================
   VERSI 1 — "Klasik"  ·  root
   Palet brosur yang klien sudah setujui + serif Zodiak / sans Switzer.

   Ini salah satu dari tiga fork. Dua lainnya:
     blue/assets/css/tokens.css   — Senja, indigo
     green/assets/css/tokens.css  — Hutan, pine-teal
   Ketiganya berdiri sendiri dan boleh menyimpang. Satu-satunya yang wajib
   tetap sinkron adalah daftar nilai di tools/contrast.mjs; jalankan
   `node tools/contrast.mjs` setiap kali warna di sini berubah.

   Lapisan primitif --c-* dipertahankan karena base.css dan site.css sudah
   memakainya sebagai kosakata di ~60 tempat. Memberi primitif nilai baru
   jauh lebih aman daripada menulis ulang seluruh call site.
   ========================================================================== */

@font-face {
  font-family: 'Gavtela';
  src: url('../fonts/Gavtela.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- primitif --------------------------------------------------------- */
  --c-shell:      #F2F1EF;  /* permukaan terang */
  --c-shell-2:    #E7E6E4;  /* permukaan terang alternatif */
  --c-ink:        #282725;  /* tinta */
  --c-ink-2:      #3A3936;
  --c-stone:      #AEAAA4;  /* netral tengah */
  --c-stone-2:    #666058;  /* teks muted */
  --c-tan:        #AB8A6B;  /* aksen */
  --c-clay:       #9B4F34;  /* peringatan / status booked */
  --c-arang:      #302F2B;  /* permukaan gelap */
  --c-arang-2:    #22211D;
  /* Hijau perbukitan: selingan untuk sebagian section gelap (.theme-hijau),
     bukan pengganti arang. fg 11.75, muted 7.00, accent-text 4.55. */
  --c-hijau:      #24332B;
  --c-hijau-2:    #1A2620;

  --a-line:       rgba(40, 39, 37, 0.09);
  --a-line-soft:  rgba(40, 39, 37, 0.05);
  --a-line-dark:  rgba(242, 241, 239, 0.14);


  /* --- scrim foto -------------------------------------------------------
     Pindahan dari base.css. Ini WARNA, jadi rumahnya di sini dan boleh
     menyimpang per fork. --a-scrim-rgb dipakai langsung oleh site.css lewat
     rgba(var(--a-scrim-rgb), a) supaya satu nilai mengatur SELURUH scrim:
     hero, pagehero, nav, dan varian layar kecil. */
  --a-scrim-rgb:  21, 20, 18;
  --a-scrim:      linear-gradient(180deg, rgba(var(--a-scrim-rgb),0) 0%, rgba(var(--a-scrim-rgb),.28) 45%, rgba(var(--a-scrim-rgb),.72) 100%);
  --a-scrim-top:  linear-gradient(180deg, rgba(var(--a-scrim-rgb),.55) 0%, rgba(var(--a-scrim-rgb),0) 60%);

  /* --- warna pihak ketiga, sama di ketiga versi -------------------------
     #25D366 (neon) terlalu menyilaukan dan teks putih di atasnya hanya 2:1.
     #008069 = hijau teal merek WhatsApp (header WhatsApp Web), putih 4.9:1. */
  --c-wa:         #008069;
  --c-wa-2:       #075E54;

  /* --- CTA "Survey Lokasi" di nav (.nav__actions .btn--accent) ----------
     Merah tua, teks putih 9.01:1. Tombol .btn--accent lain tetap tan. */
  --c-maroon:     #8C1F1F;
  --c-maroon-2:   #6E1717;

  /* --- semantik: permukaan terang --------------------------------------- */
  --bg:              var(--c-shell);
  --bg-alt:          var(--c-shell-2);
  --fg:              var(--c-ink);
  --fg-muted:        var(--c-stone-2);
  --accent:          var(--c-tan);

  /* Dinaikkan dari #8B6642 ke #825D3B: nilai lama hanya 4.13:1 di atas
     --bg-alt, sedangkan section #simulasi berlatar --bg-alt.
     Sekarang 4.71:1 di --bg-alt dan 5.20:1 di --bg. */
  --accent-text:     #825D3B;

  /* Teks di ATAS --accent (tombol aksen, badge PPN). */
  --on-accent:       var(--c-ink);

  --line:            var(--a-line);

  /* --- semantik: permukaan gelap ---------------------------------------- */
  --bg-dark:         var(--c-arang);
  --bg-dark-2:       var(--c-arang-2);
  --fg-dark:         var(--c-shell);
  --fg-muted-dark:   #BEBCB9;
  --accent-text-dark:#B39171;
  --line-dark:       var(--a-line-dark);

  /* --- font ------------------------------------------------------------- */
  --font-display: 'Zodiak', Georgia, 'Times New Roman', serif;
  --font-body:    'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-brand:   'Gavtela', var(--font-display);

  /* WAJIB Switzer, bukan Zodiak. Lebar digit Zodiak berkisar 0.387-0.698 em
     (selisih 44%) dan font itu tidak punya fitur OpenType `tnum`, jadi
     font-variant-numeric: tabular-nums tidak berefek sama sekali — angka di
     simulasi KPR akan melompat saat slider digeser. Switzer sudah sama lebar
     secara native. Diukur dengan fontTools dari .woff2 yang benar-benar dimuat. */
  --font-num:     var(--font-body);

  /* --- setelan tipografi khusus Zodiak ---------------------------------- */
  --fw-display: 400;
  --lh-display: 1.02;
  --ls-display: -0.02em;

  /* Tinggi-x Zodiak 0.498 em, 6.0% lebih pendek dari Bricolage 0.528 em,
     jadi pada ukuran font yang sama ia terlihat lebih kecil. */
  --fs-scale-display: 1.06;

  /* Satuan ch mengukur lebar glyph '0'.
     '0' Zodiak = 0.698 em (Instrument Serif yang lama: 0.460 em),
     jadi pagu 20ch lama setara 13ch di sini. */
  /* Pagu headline hero, dalam em supaya tidak bergantung pada lebar glyph
     '0'. Diukur di 1280x720: Zodiak butuh minimal 11em agar headline hero
     patah 2 baris, bukan 3. Nilai di bawah memberi satu langkah kelonggaran
     untuk terjemahan EN yang lebih panjang. */
  --maxw-hero: 12em;
  --maxw-head: 12ch;

  /* Diukur di mesin render, bukan dari file font: 1ch Switzer = 9.16px @17px,
     rata-rata huruf prosa Indonesia = 7.79px. 60ch -> 550px -> 70 karakter
     per baris, tepat di tengah pita baca 65-75. (blue/green: 55ch, karena
     1ch Schibsted = 10.39px.) */
  --maxw-text: 60ch;
}

/* Section gelap menukar peran token, tidak menulis warna baru.
   Berlaku sama di ketiga versi. */
.theme-dark {
  --bg:          var(--bg-dark);
  --bg-alt:      var(--bg-dark-2);
  --fg:          var(--fg-dark);
  --fg-muted:    var(--fg-muted-dark);
  --accent-text: var(--accent-text-dark);
  --line:        var(--line-dark);
}
.theme-dark.theme-hijau { --bg: var(--c-hijau); --bg-alt: var(--c-hijau-2); }