/* ==========================================================================
   BIRO UMUM — DESIGN TOKENS
   --------------------------------------------------------------------------
   ⭐ FILE INI ADALAH SATU-SATUNYA TEMPAT UNTUK MENGUBAH TAMPILAN GLOBAL
      (font, warna, ukuran huruf, radius, bayangan, kecepatan animasi).

   Ubah nilainya di sini, dan SELURUH halaman sisi user (beranda, dokumentasi,
   login, buku tamu) akan ikut berubah. Tidak perlu menyentuh file lain.

   Urutan isi file:
     1. FONT          -> jenis huruf & skala ukuran
     2. WARNA         -> palet merek, teks, permukaan, status
     3. BENTUK        -> radius sudut, ketebalan garis
     4. BAYANGAN      -> shadow & efek sinematik
     5. TATA LETAK    -> lebar kontainer, tinggi navbar, jarak antar seksi
     6. GERAK         -> durasi & easing animasi
     7. MODE GELAP    -> (opsional) penyesuaian otomatis
   ========================================================================== */

/* --------------------------------------------------------------------------
   IMPOR FONT
   Ganti URL di bawah ini kalau ingin memakai jenis huruf lain,
   lalu sesuaikan --bu-font-display / --bu-font-body pada bagian 1.
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
    /* ======================================================================
       1. FONT
       ====================================================================== */

    /* Huruf judul — bernuansa elegan & sinematik (serif) */
    --bu-font-display: "Playfair Display", "Times New Roman", Georgia, serif;

    /* Huruf isi / antarmuka — bersih & sangat mudah dibaca semua usia */
    --bu-font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Huruf angka / data */
    --bu-font-num: var(--bu-font-body);

    /* Ukuran dasar teks. 17px dipilih agar nyaman dibaca lintas generasi
       (boomer & gen X butuh teks lebih besar dari standar 16px). */
    --bu-fs-base: 1.0625rem; /* 17px */
    --bu-fs-sm: 0.9375rem; /* 15px */
    --bu-fs-xs: 0.8125rem; /* 13px */

    /* Skala judul — fluid, otomatis menyesuaikan lebar layar */
    --bu-fs-hero: clamp(2.6rem, 6.4vw, 5.25rem);
    --bu-fs-h1: clamp(2rem, 4.4vw, 3.4rem);
    --bu-fs-h2: clamp(1.7rem, 3.2vw, 2.6rem);
    --bu-fs-h3: clamp(1.3rem, 2.1vw, 1.7rem);
    --bu-fs-h4: clamp(1.1rem, 1.5vw, 1.3rem);
    --bu-fs-lead: clamp(1.05rem, 1.35vw, 1.25rem);

    /* Ketebalan */
    --bu-fw-light: 300;
    --bu-fw-normal: 400;
    --bu-fw-medium: 500;
    --bu-fw-semibold: 600;
    --bu-fw-bold: 700;
    --bu-fw-black: 800;

    /* Jarak baris & huruf */
    --bu-lh-tight: 1.12;
    --bu-lh-snug: 1.32;
    --bu-lh-body: 1.75; /* longgar = ramah untuk mata yang lelah */
    --bu-ls-kicker: 0.24em; /* spasi huruf label kecil (sinematik) */
    --bu-ls-tight: -0.02em;

    /* ======================================================================
       2. WARNA
       Palet diambil dari Lambang Sumatera Barat: hijau, merah, emas, hitam.
       ====================================================================== */

    /* -- Tinta / dasar gelap sinematik -- */
    --bu-ink: #071411;
    --bu-ink-2: #0c2019;
    --bu-ink-3: #143026;
    --bu-ink-rgb: 7, 20, 17;

    /* -- Hijau (warna merek utama) -- */
    --bu-brand: #0e6b41;
    --bu-brand-dark: #084d2f;
    --bu-brand-light: #17915a;
    --bu-brand-tint: #eaf4ef; /* latar lembut */
    --bu-brand-rgb: 14, 107, 65;

    /* -- Emas (aksen keanggunan) -- */
    --bu-gold: #c8a24b;
    --bu-gold-light: #e3c886;
    --bu-gold-dark: #9c7c2f;
    --bu-gold-tint: #f7f0dd;
    --bu-gold-rgb: 200, 162, 75;

    /* -- Merah (aksen penegas, dipakai sedikit saja) -- */
    --bu-crimson: #a8232a;
    --bu-crimson-tint: #fbeaea;

    /* -- Teks -- */
    --bu-text: #16211c; /* teks utama  (kontras AAA di atas putih) */
    --bu-text-2: #4e5f57; /* teks sekunder */
    --bu-text-3: #7b8a83; /* teks tersier / caption */
    --bu-text-inv: #ffffff; /* teks di atas latar gelap */
    --bu-text-inv-2: rgba(255, 255, 255, 0.78);

    /* -- Permukaan -- */
    --bu-bg: #ffffff;
    --bu-bg-2: #f5f8f6; /* abu kehijauan sangat muda */
    --bu-bg-3: #eef3f0;
    --bu-surface: #ffffff;
    --bu-line: #e0e8e4; /* garis pemisah */
    --bu-line-strong: #c7d4cd;
    --bu-line-inv: rgba(255, 255, 255, 0.16);

    /* -- Status -- */
    --bu-success: #12784a;
    --bu-success-tint: #e6f4ec;
    --bu-danger: #b32a30;
    --bu-danger-tint: #fbeaea;
    --bu-warning: #a9791a;
    --bu-warning-tint: #fdf3df;

    /* -- Gradien siap pakai -- */
    --bu-grad-brand: linear-gradient(
        135deg,
        var(--bu-brand-dark) 0%,
        var(--bu-brand) 55%,
        var(--bu-brand-light) 100%
    );
    --bu-grad-gold: linear-gradient(
        135deg,
        var(--bu-gold-light) 0%,
        var(--bu-gold) 100%
    );
    --bu-grad-ink: linear-gradient(
        160deg,
        var(--bu-ink) 0%,
        var(--bu-ink-2) 45%,
        var(--bu-ink-3) 100%
    );

    /* ======================================================================
       3. BENTUK
       ====================================================================== */
    --bu-radius-xs: 6px;
    --bu-radius-sm: 10px;
    --bu-radius: 16px;
    --bu-radius-lg: 22px;
    --bu-radius-xl: 30px;
    --bu-radius-pill: 999px;

    --bu-border: 1px solid var(--bu-line);
    --bu-border-inv: 1px solid var(--bu-line-inv);
    --bu-hairline-gold: 1px solid rgba(var(--bu-gold-rgb), 0.45);

    /* ======================================================================
       4. BAYANGAN
       ====================================================================== */
    --bu-shadow-xs: 0 1px 2px rgba(var(--bu-ink-rgb), 0.06);
    --bu-shadow-sm: 0 2px 10px rgba(var(--bu-ink-rgb), 0.06);
    --bu-shadow: 0 10px 30px -12px rgba(var(--bu-ink-rgb), 0.18);
    --bu-shadow-lg: 0 26px 60px -20px rgba(var(--bu-ink-rgb), 0.28);
    --bu-shadow-xl: 0 40px 90px -30px rgba(var(--bu-ink-rgb), 0.45);
    --bu-shadow-gold: 0 14px 40px -16px rgba(var(--bu-gold-rgb), 0.55);
    --bu-focus-ring: 0 0 0 3px rgba(var(--bu-brand-rgb), 0.32);

    /* ======================================================================
       5. TATA LETAK
       ====================================================================== */
    --bu-container: 1200px;
    --bu-container-wide: 1400px;
    --bu-container-narrow: 820px;
    --bu-gutter: clamp(1.15rem, 4vw, 2.5rem);

    --bu-nav-h: 78px; /* tinggi navbar (desktop) */
    --bu-nav-h-sm: 64px; /* tinggi navbar (mobile)  */

    /* Jarak vertikal antar bagian halaman */
    --bu-space-section: clamp(3.5rem, 8vw, 7.5rem);
    --bu-space-block: clamp(1.75rem, 4vw, 3rem);

    /* ======================================================================
       6. GERAK
       ====================================================================== */
    --bu-ease: cubic-bezier(0.22, 1, 0.36, 1); /* halus & mahal */
    --bu-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --bu-dur-fast: 160ms;
    --bu-dur: 320ms;
    --bu-dur-slow: 720ms;
    --bu-dur-cinematic: 1100ms; /* durasi reveal saat scroll */

    /* Tekstur butir film (grain) untuk kesan sinematik */
    --bu-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   PENYESUAIAN UNTUK LAYAR KECIL
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    :root {
        --bu-fs-base: 1rem; /* 16px */
        --bu-lh-body: 1.7;
    }
}

/* --------------------------------------------------------------------------
   HORMATI PREFERENSI "KURANGI GERAKAN" (aksesibilitas)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --bu-dur-fast: 1ms;
        --bu-dur: 1ms;
        --bu-dur-slow: 1ms;
        --bu-dur-cinematic: 1ms;
    }
}