/* ===========================================================================
   TWNC — Design Tokens
   Sumber tunggal untuk warna, tipografi, jarak, dan radius.
   Semua komponen di main.css HARUS membaca nilai dari sini, tidak boleh
   menulis literal warna. Saat pindah ke CodeIgniter 4, berkas ini disalin
   apa adanya ke public/assets/css/tokens.css.
   =========================================================================== */

:root {

  /* =========================================================================
     1. WARNA MEREK — dari brand guidelines TWNC

     Empat nilai ini adalah milik TWNC, bukan keputusan desain. Jangan diubah
     tanpa persetujuan mereka. Semua warna lain di berkas ini diturunkan dari
     sini.

     Catatan: pada lembar brand, TRANQUIL tertulis R:188 G:255 B:148, padahal
     hex #BCE194 sebenarnya rgb(188, 225, 148). Nilai G tidak cocok. Yang
     dipakai di sini adalah hex-nya, karena hex yang menjadi acuan di web.
     Sudah diajukan ke TWNC untuk dikonfirmasi.
     ========================================================================= */
  --brand-forest:   #445A3E;   /* PANTONE 2410 C — C70 M44 Y78 K35 */
  --brand-basil:    #789D4A;   /* PANTONE 576 C  — C58 M21 Y92 K4  */
  --brand-leaf:     #9EB356;   /* PANTONE 2303 C — C43 M16 Y84 K0  */
  --brand-tranquil: #BCE194;   /* PANTONE 7486 C — C28 M0  Y54 K0  */

  /* Kanal RGB dari warna merek, untuk lapisan transparan. */
  --brand-forest-rgb:    68, 90, 62;
  --brand-basil-rgb:    120, 157, 74;
  --brand-leaf-rgb:     158, 179, 86;
  --brand-tranquil-rgb: 188, 225, 148;


  /* =========================================================================
     2. PERAN WARNA — mode terang

     Pemetaan ini ditentukan oleh kontras terukur, bukan selera:

       di atas kertas terang   FOREST 6,76 lolos · BASIL 2,79 · LEAF 2,08 gagal
       di atas kertas gelap    LEAF 8,17 lolos   · BASIL 6,07 · FOREST 2,51 gagal
       di atas foto bersrim    TRANQUIL 12,59    · LEAF 7,94  · FOREST 2,44 gagal

     Karena itu FOREST memimpin di mode terang, LEAF di mode gelap, dan
     TRANQUIL dipakai di atas permukaan gelap tetap seperti hero dan footer.
     ========================================================================= */

  /* Netral, diturunkan dari hue merek (107deg) supaya abu-abunya tidak
     terasa netral-dingin di sebelah hijau TWNC. */
  --c-paper:        #F0F3EF;   /* latar halaman */
  --c-surface:      #F8F9F8;   /* kartu, panel */
  --c-surface-2:    #E2E8E1;   /* panel tenggelam, track */
  --c-ink:          #11170F;   /* teks utama */
  --c-ink-2:        #414F3D;   /* teks sekunder */
  --c-ink-3:        #63735E;   /* teks tersier, caption — digelapkan dari #6D8068 yang hanya 3,80:1 */
  --c-rule:         #D5DCD3;   /* garis pemisah tipis */
  --c-rule-firm:    #B8C2B5;   /* garis pemisah tegas */

  /* Hijau struktural: tautan, tombol, aksen. */
  --c-canopy:       var(--brand-forest);
  --c-canopy-soft:  rgba(var(--brand-forest-rgb), .10);
  --c-on-canopy:    #F0F3EF;   /* teks DI ATAS bidang --c-canopy */

  /* Aksen terang, khusus di atas permukaan gelap tetap (hero, sorotan,
     footer). Di mode terang tidak pernah dipakai sebagai teks di kertas —
     kontrasnya hanya 1,31. */
  --c-accent-bright: var(--brand-tranquil);

  /* Bidang merek.

     Brand guidelines memakai hijau sebagai BIDANG PENUH, bukan aksen kecil:
     amplop dan map seluruhnya FOREST, poster berlatar hijau utuh. Token ini
     membawa cara itu ke situs — satu bidang hijau padat sebagai jangkar
     visual, bukan sekadar warna tautan.

     Nilainya tetap di kedua tema, seperti --c-deep, karena bidang merek harus
     terlihat sama di mana pun. Pasangan FOREST + TRANQUIL mencapai 5,16 dan
     itu satu-satunya pasangan antar-warna-merek yang aman untuk teks —
     FOREST+LEAF hanya 3,25 dan BASIL+TRANQUIL 2,13. */
  --c-field:        var(--brand-forest);
  --c-on-field:     #F0F3EF;                /* label, 6,76 di atas FOREST */
  --c-on-field-num: var(--brand-tranquil);  /* angka, 5,16 di atas FOREST */
  --c-field-rule:   rgba(240, 243, 239, .18);

  /* Latar gelap tetap — sama di kedua mode, supaya foto selalu duduk di atas
     dasar yang konsisten. */
  --c-deep:         #0C110B;
  --c-on-deep:      #F0F3EF;
  --c-on-deep-2:    #AEBBAA;
  --c-deep-rgb:     12, 17, 11;
  --c-on-deep-rgb:  240, 243, 239;

  /* Warna status konservasi.

     Ini SATU-SATUNYA warna di situs yang berada di luar palet merek, dan itu
     disengaja. Statusnya fungsional, bukan dekoratif: menandai spesies yang
     berstatus kritis dengan hijau di antara hijau lain akan menghilangkan
     seluruh maknanya. Perannya setara warna galat di antarmuka mana pun —
     jarang dicantumkan di brand guideline, tapi selalu dibutuhkan.

     Nada oker dipilih karena mengikuti warna pelage harimau Sumatra, satwa
     yang paling banyak menyandang status ini di kawasan TWNC.
     Menunggu konfirmasi TWNC. */
  --c-status-critical: #A76018;

  --c-focus:        var(--brand-forest);


  /* ---- Tipografi --------------------------------------------------------- */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body:    "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16.5px;
  --fs-md:   18px;
  --fs-lg:   clamp(20px, 1.6vw, 23px);
  --fs-xl:   clamp(25px, 2.9vw, 33px);
  --fs-2xl:  clamp(31px, 4.3vw, 47px);
  --fs-3xl:  clamp(38px, 6.2vw, 72px);

  --lh-tight: 1.08;
  --lh-head:  1.18;
  --lh-body:  1.62;

  --ls-mono: .12em;

  /* ---- Jarak ------------------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --measure: 66ch;
  --wrap: 1180px;
  --wrap-narrow: 780px;

  /* ---- Bentuk ------------------------------------------------------------ */
  --r-sm: 2px;
  --r-md: 3px;
  --shadow-1: 0 1px 2px rgba(17, 23, 15, .06);
  --shadow-2: 0 6px 24px -8px rgba(17, 23, 15, .18);

  --section-y: clamp(64px, 9vw, 120px);
}


/* ===========================================================================
   3. PERAN WARNA — mode gelap

   Hanya token peran yang diredefinisi. Empat warna merek di blok 1 TIDAK
   ikut berubah — itu nilai tetap milik TWNC; yang berubah hanya peran mana
   yang memakai warna mana.

   Dua blok, karena pembaca punya tiga keadaan: mengikuti sistem (root tanpa
   stempel — ini mayoritas), memilih terang, dan memilih gelap.
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-paper:        #0C110B;
    --c-surface:      #141912;
    --c-surface-2:    #1D251B;
    --c-ink:          #E4E9E2;
    --c-ink-2:        #AEBBAA;
    --c-ink-3:        #84977F;
    --c-rule:         #293326;
    --c-rule-firm:    #3A4637;

    /* FOREST hanya mencapai 2,51 di atas kertas gelap. LEAF mencapai 8,17. */
    --c-canopy:       var(--brand-leaf);
    --c-canopy-soft:  rgba(var(--brand-leaf-rgb), .14);
    --c-on-canopy:    #0C110B;   /* hijau muda butuh teks gelap */

    --c-focus:        var(--brand-leaf);

    --c-status-critical: #D9913D;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .34);
    --shadow-2: 0 6px 24px -8px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --c-paper:        #0C110B;
  --c-surface:      #141912;
  --c-surface-2:    #1D251B;
  --c-ink:          #E4E9E2;
  --c-ink-2:        #AEBBAA;
  --c-ink-3:        #84977F;
  --c-rule:         #293326;
  --c-rule-firm:    #3A4637;

  --c-canopy:       var(--brand-leaf);
  --c-canopy-soft:  rgba(var(--brand-leaf-rgb), .14);
  --c-on-canopy:    #0C110B;

  --c-focus:        var(--brand-leaf);

  --c-status-critical: #D9913D;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .34);
  --shadow-2: 0 6px 24px -8px rgba(0, 0, 0, .55);
}