/* ==========================================================================
   Design tokens — Pixelzenic v3
   Sumber: Frame 60.pdf (artboard 1600px) + skala tipografi yang ditetapkan.
   ========================================================================== */

:root {
   /* --- Grid -------------------------------------------------------------
     Layout guide Figma: 5 kolom x 301px, gutter 4px, centered.
     5 x 301 + 4 x 4 = 1521px. Di viewport >= 1600px lebarnya persis 1521px,
     di bawah itu kolom jadi fluid tapi proporsi 2/5 dan 3/5 tetap sama. */
   --grid-max: 1521px;
   --gutter: 4px;
   --page-pad: 39.5px;
   /* (1600 - 1521) / 2 */

   /* --- Warna ------------------------------------------------------------ */
   --c-ink: #000000;
   --c-text: #1a1a1a;
   --c-text-muted: #5a5a5a;
   --c-text-faint: #a9a9a9;
   /* nomor framework, label "We optimize:" */
   --c-surface: #ffffff;
   --c-surface-alt: #FFF6E7;
   --c-surface-tint: #f5f5f5;
   --c-surface-card: #fafafa;
   /* kartu "What we optimize" (Figma 55:374) */
   --c-surface-dark: #212121;
   --c-border: #e5e5e5;
   --c-rule: #e6e6e6;
   /* Garis chip audience di About — satu tingkat lebih pucat dari --c-rule. */
   --c-rule-faint: #f2f2f2;
   /* garis pemisah framework & FAQ */
   --c-border-dark: #3a3a3a;
   /* Garis tombol sekunder di atas latar gelap (kartu Selected Work di home,
      tombol dokumen di halaman case study). */
   --c-border-on-dark: #5b5b5b;
   --c-on-dark: #ffffff;
   --c-on-dark-muted: #b5b5b5;
   --c-nav-label: #919191;
   --c-nav-border: #333333;
   --c-hover-gradient-start: #FFF0FB;
   --c-hover-gradient-mid: #fdf3e7;
   --c-hover-gradient-end: #ffecd6;
   /* Kartu working model di Product Design Partner (artboard Frame 121.pdf) —
      tiga tingkat krem yang makin pekat ke kanan, menandai model paling dalam. */
   --c-model-01: #FEFAF3;
   --c-model-02: #FDF6E8;
   --c-model-03: #FCF0D9;

   --c-brand-yellow: #FFD540;
   --c-brand-magenta: #FF3EF7;
   --c-accent-orange: #ffa007;
   --c-btn-hover-fill: #ffa007;
   --c-btn-hover-text: var(--c-ink);

   /* Gradient brand dipakai tombol primary di semua halaman; sebelumnya cuma
      hidup di dalam scope .page-home. */
   --grad-brand: linear-gradient(90deg, var(--c-brand-yellow) 0%, var(--c-brand-magenta) 100%);
   --grad-brand-rev: linear-gradient(90deg, var(--c-brand-magenta) 0%, var(--c-brand-yellow) 100%);

   /* --- Tipografi -------------------------------------------------------- */
   --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

   --fs-h1: 76px;
   --fs-h2: 48px;
   --fs-h3: 28px;
   --fs-lead: 24px;
   /* paragraf hero service & jawaban FAQ */
   --fs-body-1: 20px;
   --fs-body-2: 16px;
   --fs-small: 12px;

   --lh-h1: 1.1;
   --lh-h2: 1.2;
   --lh-h3: 1.3;
   --lh-lead: 1.4;
   --lh-body-1: 1.5;
   --lh-body-2: 1.6;
   --lh-small: 1.4;

   --fw-light: 300;
   --fw-regular: 400;
   --fw-semibold: 600;
   --fw-bold: 700;

   --ls-eyebrow: 0.08em;
   --ls-button: 0.06em;

   /* --- Spacing ---------------------------------------------------------- */
   --space-2: 4px;
   --space-3: 8px;
   --space-4: 12px;
   --space-5: 16px;
   --space-6: 24px;
   --space-7: 32px;
   --space-8: 40px;
   --space-9: 56px;
   --space-10: 80px;
   --space-11: 100px;
   --space-section: 95px;

   /* --- Ukuran komponen -------------------------------------------------- */
   --btn-h: 48px;
   --btn-h-sm: 40px;
   --btn-pad-x: 28px;
   --logo-h: 32px;
   --placeholder-size: 160px;

   /* --- Header sticky ---------------------------------------------------- */
   --header-bg-light: rgba(255, 255, 255, 0.4);
   --header-bg-dark: rgba(0, 0, 0, 0.4);
   --header-blur: 12px;
   --header-pad-y: 40px;
   --header-pad-y-sm: 20px;
   --z-header: 100;
}