/* ============================================================
   ANAYA — DESIGN TOKENS
   Satu-satunya tempat nilai desain didefinisikan.
   Jangan hardcode warna / ukuran font di file CSS lain.
   Sumber: dump CSS Figma di folder design-source
   ============================================================ */

:root {
  /* ---------- Warna: brand ---------- */
  --c-primary: #1c75bc;          /* biru utama: tombol, heading, footer */
  --c-primary-dark: #155e97;     /* hover tombol primer (turunan, -15% lightness) */
  --c-accent: #27aae1;           /* biru muda logo, aksen */

  /* ---------- Warna: teks ---------- */
  --c-ink: #000000;              /* body text */
  --c-ink-soft: #58595b;         /* teks sekunder */
  --c-ink-mute: #231f20;         /* teks gelap alternatif */

  /* ---------- Warna: permukaan ---------- */
  --c-white: #ffffff;
  --c-surface: #f4f4f4;          /* latar kartu blog, blok misi */
  --c-border: #c9c9c9;
  --c-border-soft: #bfbfbf;
  /* Garis sidebar daftar produk lebih gelap dari border biasa — dicek
     lewat sampel piksel Preview.png (bukan dump, yang tidak mencatat
     border/stroke di sini — lihat catatan proyek aturan #10): rgb(128,128,128)
     konsisten di garis horizontal antar-item maupun garis vertikal
     pemisah sidebar/kolom detail. */
  --c-border-strong: #808080;
  --c-placeholder: #d9d9d9;
  /* Latar dropdown produk di mobile (dump Produk Rectangle 109). Token
     sendiri, TIDAK memakai ulang --c-placeholder: nilainya kebetulan sama
     tapi perannya beda (yang satu warna TEKS placeholder), dan menyamakan
     keduanya berarti mengubah salah satu ikut mengubah yang lain. */
  --c-pilih-bg: #d9d9d9;

  /* ---------- Warna: status & aksen ---------- */
  --c-whatsapp: #099f49;
  --c-danger: #dd5417;

  /* ---------- Overlay ---------- */
  --overlay-hero: rgba(0, 0, 0, 0.6);    /* hero halaman dalam — nilai dari dump Tentang/Blog/Kontak */
  /* Foto hero yang sudah gelap/kontras tinggi (bubuk di latar hitam, cairan
     biru) butuh overlay lebih tipis — 0.6 akan membuatnya terlalu gelap.
     Dump Produk: 0.39, Flexitank: 0.4 — disatukan jadi satu varian "soft". */
  --overlay-hero-soft: rgba(0, 0, 0, 0.4);
  --overlay-band: rgba(0, 0, 0, 0.45);   /* band CTA foto, teks lebih padat */
  /* Dropdown navbar "Produk" — nilai dari Figma (get_design_context node
     78:266, "Rectangle 48"): rgba(28,117,188,0.6), BUKAN solid var(--c-primary).
     Transparan 60% supaya foto hero di baliknya tetap terlihat samar —
     awalnya salah dikira gradient karena efek itu, ternyata cuma alpha. */
  /* ⚠️ 0.9 — KEPUTUSAN klien 2026-10-09 ("opacity-nya ditebelin, biar lebih
     bold / tidak saru"). Riwayat hari itu: Figma 0.6 -> 0.96 -> 0.8 -> 0.9.
     Konsekuensi yang diketahui & diterima: di bagian dropdown yang menumpang
     latar PUTIH teks putihnya 4,07:1 (0.6 dulu 2,42), di bawah AA 4,5 untuk
     teks 16px. Di atas foto & footer biru jauh lebih tinggi. Nilai terendah
     yang lulus AA di atas latar apa pun adalah 0.96 (4,53:1).
     Jangan diubah tanpa persetujuan klien. */
  --overlay-nav-dropdown: rgba(28, 117, 188, 0.9);
  /* Kartu kategori: latar aktif/hover 90%, sepasang dengan latar tidak
     aktifnya yang juga 90% (rgba(255,255,255,0.9)). Dump Home
     Rectangle 49 & dump Produk sepakat di angka ini — bukan biru solid. */
  --overlay-card-cat: rgba(28, 117, 188, 0.9);
  /* Gradien putih di atas foto hero, supaya menu berteks gelap tetap terbaca.
     Di Figma layernya 260x1440 dengan gradient 90deg lalu di-rotate 90deg —
     hasil akhirnya vertikal, jadi di sini ditulis langsung sebagai 180deg. */
  --fade-white: linear-gradient(180deg, rgba(255,255,255,.9) 7.69%, rgba(255,255,255,0) 100%);
  --fade-white-h: 260px;

  /* ---------- Tipografi ---------- */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fw-light: 300;    /* nilai kontak (Kontak) — dump: 20px/300 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Judul hero (30px) & beberapa elemen penekanan (item sidebar aktif, judul
     produk) konsisten 800 di dump — bukan 700. Dicek ulang di 3 halaman
     (Home, Tentang, Produk) sebelum ditambahkan sebagai token terpisah. */
  --fw-extrabold: 800;

  /* Skala desktop (acuan artboard 1440px).
     Nilai fluid diatur di base.css memakai clamp(). */
  --fs-hero: 30px;
  --fs-hero-sub: 25px;
  /* Judul section (biru, rata tengah): "Produk Kami", "Solusi yang Kita
     Berikan", "Klien", "Visi/Misi Perusahaan", "Produk yang Cocok".
     Dump Home & Tentang sepakat 25px/31 — bukan 23px. 23px sebelumnya
     dipakai untuk KEDUA peran sekaligus; 23px sebenarnya milik judul
     sub-bagian DI DALAM konten (lihat --fs-subsection). */
  --fs-section: 25px;
  /* Judul sub-bagian di dalam konten: "Nomer Telp"/"Alamat Kantor"
     (Kontak), heading artikel "Grade Standard" (Blog Detail), judul kartu
     form biru. Dump Kontak & Blog Detail sepakat 23px/25. */
  --fs-subsection: 23px;
  --fs-product: 24px;
  --fs-card-title: 18px;    /* judul kartu blog — dump Home & Blog sama-sama 18px */
  --fs-body-lg: 20px;       /* nilai kontak & alamat gudang (Kontak) */
  --fs-body: 18px;
  --fs-body-sm: 16px;
  --fs-label: 14px;
  --fs-meta: 13px;
  --fs-micro: 12px;

  --lh-tight: 1.25;   /* judul */
  --lh-snug: 1.4;     /* subjudul, kartu */
  --lh-body: 1.7;     /* paragraf — dinaikkan karena x-height Poppins kecil */

  /* ---------- Spacing ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-30: 120px;

  --section-y: var(--sp-20);     /* jarak vertikal antar section */

  /* ---------- Layout ---------- */
  --container: 1200px;
  /* Jarak konten ke tepi layar. Proporsional, bukan tetap: di desain
     marginnya 120px pada artboard 1440px (8,3%). Dengan gutter tetap 24px,
     di layar 1280px konten cuma 40px dari tepi dan terlihat mepet.
     clamp() menjaga proporsi itu ke bawah untuk layar kecil.

     Batas atas 80px (dulu 120px): di ≥1360px hasilnya SAMA PERSIS seperti
     sebelumnya — container tetap mentok 1200px seperti desain — tapi di
     rentang 1000-1360px (laptop biasa / browser yang di-zoom) container
     tidak lagi ikut menyusut sejauh itu. Dengan cap 120px, di viewport
     1280px container cuma 1068px (kolom artikel 659px), padahal teks
     judul 30px butuh ~678px: judul Blog Detail jadi wrap 2 baris padahal
     dump-nya 1 baris, dan proporsi judul-vs-foto meleset jauh dari desain
     (desain: judul 677px = 85% lebar foto 801px). Dengan cap 80px, di
     1280px container 1120px -> kolom artikel 711px, judul muat wajar.
     Mobile tidak berubah: di ≤964px, 8,3vw masih di bawah 80px. */
  --gutter: clamp(20px, 8.3vw, 80px);
  --grid-gap: var(--sp-6);

  /* ---------- Radius ---------- */
  --r-sm: 15px;
  --r-md: 20px;
  --r-lg: 25px;
  --r-pill: 999px;

  /* ---------- Elevasi ---------- */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.12);
  /* Nilai dari dump (Rectangle 75, Produk Standard Grade & Rectangle 122
     Flexitank, sama persis): 2px 5px 20px rgba(0,0,0,.25) — sama dengan
     shadow kartu kategori (.card-cat). Sebelumnya ditulis 0 8px 32px .15,
     jauh lebih lemah, bikin kartu form terlihat kurang "terangkat" dari
     foto di baliknya. */
  --shadow-float: 2px 5px 20px rgba(0, 0, 0, 0.25);  /* kartu form di atas foto */
  --shadow-dropdown: 0 6px 24px rgba(0, 0, 0, 0.15);

  /* Kulit chip FLEXITANK di navbar putih. Latarnya HAMPIR putih — dump Home
     menulisnya eksplisit `rgba(0,0,0,0.004)`, yang terbaca 254 di render.
     Bayangan dalamnya TIDAK ada di satu pun dump (aturan #40: export kode
     Figma membuang efek); nilainya DIUKUR dari Header.png dengan mencari
     kandidat yang selisihnya terkecil terhadap render — inset -2/-3/4 pada
     alpha .04 memberi selisih rata-rata 0,159 dibanding 0,905 kalau tanpa
     bayangan sama sekali, dan wilayah kontrol di LUAR pill terbaca 255,0
     persis (jadi bayangannya memang ke dalam, bukan drop shadow). */
  --chip-bg: rgba(0, 0, 0, 0.004);
  --chip-shadow: inset -2px -3px 4px rgba(0, 0, 0, 0.04);

  /* Tinggi pita header. Dipakai dua tempat yang WAJIB sepakat: tinggi
     header itu sendiri (padding-block 37/60 + logo 55) dan
     `scroll-padding-top` di base.css — tanpa yang kedua, setiap lompatan
     jangkar mendarat di balik navbar yang sekarang melayang. */
  --header-h: 152px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms var(--ease);
  --t-base: 180ms var(--ease);
  --t-slow: 400ms var(--ease);

  --marquee-duration: 40s;

  /* ---------- Z-index ---------- */
  --z-dropdown: 100;
  --z-header: 200;
  --z-drawer: 300;
}

/* Di <=900px baris header ditentukan tombol menu (44px), bukan logo (42px),
   sehingga pitanya 141px — bukan 152px. Angkanya dipisah karena
   `scroll-padding-top` memakainya; kalau dibiarkan 152px, setiap lompatan
   jangkar di HP mendarat 11px terlalu jauh. */
@media (max-width: 900px) {
  :root { --header-h: 141px; }
}

/*
 * Mobile (<=640px): pita header 109px, bukan 141px.
 *
 * ⚠️ Diverifikasi ke DUA rujukan, bukan satu (aturan #27): tinta logo mulai
 * tepat di y=25 pada Home.png MAUPUN Product.png @412. Dua dump yang sepakat
 * berarti ini nilai header mobile yang sesungguhnya, bukan kebetulan satu
 * halaman. Pitanya = 25 (atas) + 44 (tombol menu, elemen tertinggi di baris)
 * + 40 (bawah).
 *
 * Header Home melayang (overlay) sehingga tingginya tidak mengubah tata letak
 * halaman itu sama sekali — yang berubah cuma posisi logonya, dan justru itu
 * yang disamakan ke rujukan.
 */
@media (max-width: 640px) {
  :root { --header-h: 109px; }
}

/* Skala mengecil di layar kecil. Hanya nilai yang perlu diubah. */
@media (max-width: 768px) {
  :root {
    --fs-hero: 24px;
    --fs-hero-sub: 18px;
    --fs-section: 21px;
    --fs-subsection: 19px;
    --fs-product: 20px;
    --fs-card-title: 16px;
    --fs-body-lg: 18px;
    --fs-body: 16px;
    --fs-body-sm: 15px;

    --section-y: var(--sp-12);
    /* --gutter sengaja TIDAK di-override di sini: clamp() di :root sudah
       mengecil sendiri mengikuti lebar layar (8,3vw = ~32px di 390px).
       Override nilai tetap justru bikin lompatan ~44px tepat di 768px. */
  }
}