/* =========================================================
   LEADX DESIGN TOKENS
   Sumber tunggal kebenaran untuk warna, tipografi, ruang,
   grid, radius, bayangan, dan motion.
   Referensi: MASTER WEBSITE BUILD PROMPT Bab 09–13.
   Jangan menulis nilai hex / px mentah di theme.css.
   ========================================================= */

:root {
  /* ---------- 01. WARNA KORPORAT ---------- */
  --lx-navy:        #071A2B;  /* strategi / otoritas */
  --lx-blue:        #01579B;  /* kepercayaan / korporat */
  --lx-blue-light:  #0287D0;  /* insight / digital */
  --lx-orange:      #FF6200;  /* aksi / konversi */
  --lx-white:       #FFFFFF;
  --lx-gray:        #F5F7FA;

  /* ---------- 02. TURUNAN (aksesibilitas & kedalaman) ---------- */
  --lx-navy-900:    #04121E;
  --lx-navy-800:    #0B2438;
  --lx-navy-700:    #12324A;
  --lx-blue-900:    #013E6E;
  --lx-blue-050:    #E8F1F8;
  --lx-blue-bright: #3BA7E0;  /* teks kecil di latar navy — 6,54:1 */
  --lx-orange-700:  #D95000;
  /* Oranye untuk teks display besar di latar terang. #FF6200 hanya mencapai
     2,80:1 di atas #F5F7FA, di bawah ambang 3,0:1 untuk teks besar. */
  --lx-orange-ink:  #D95000;
  --lx-orange-050:  #FFF1E8;

  --lx-ink:         #0E1B26;  /* teks utama di latar terang */
  --lx-ink-muted:   #566674;  /* teks sekunder */
  --lx-ink-faint:   #5F7183;  /* caption, meta — 5.03:1 di atas putih (WCAG AA) */
  --lx-on-dark:     #FFFFFF;
  --lx-on-dark-mut: #A9BCCB;

  --lx-line:        #DDE5EC;  /* garis di latar terang */
  --lx-line-dark:   rgba(255,255,255,.14);
  --lx-surface:     #FFFFFF;
  --lx-surface-alt: var(--lx-gray);

  --lx-success:     #0F7B4F;
  --lx-warning:     #B26A00;
  --lx-danger:      #B3261E;

  /* ---------- 03. TIPOGRAFI ---------- */
  --lx-font-display: "Inter", "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;
  --lx-font-body:    "Inter", "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;
  --lx-font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

  /* Skala responsif — Bab 10: H1 56–72, H2 36–48, H3 24–30, Body 17–19 */
  --lx-fs-display: clamp(2.75rem, 1.60rem + 3.60vw, 4.75rem); /* 44 → 76 */
  --lx-fs-h1:      clamp(2.25rem, 1.45rem + 2.60vw, 4.50rem); /* 36 → 72 */
  --lx-fs-h2:      clamp(1.875rem, 1.45rem + 1.35vw, 3.00rem);/* 30 → 48 */
  --lx-fs-h3:      clamp(1.375rem, 1.20rem + 0.55vw, 1.875rem);/* 22 → 30 */
  --lx-fs-h4:      clamp(1.125rem, 1.05rem + 0.30vw, 1.375rem);
  --lx-fs-lead:    clamp(1.125rem, 1.03rem + 0.42vw, 1.4375rem);
  --lx-fs-body:    clamp(1.0625rem, 1.01rem + 0.18vw, 1.1875rem);/* 17 → 19 */
  --lx-fs-sm:      0.9375rem;
  --lx-fs-xs:      0.8125rem;
  --lx-fs-eyebrow: 0.75rem;

  --lx-lh-tight:   1.06;
  --lx-lh-snug:    1.22;
  --lx-lh-normal:  1.45;
  --lx-lh-relaxed: 1.68;

  --lx-fw-regular:  400;
  --lx-fw-medium:   500;
  --lx-fw-semibold: 600;
  --lx-fw-bold:     700;
  --lx-fw-black:    800;

  --lx-tracking-display: -0.028em;
  --lx-tracking-heading: -0.018em;
  --lx-tracking-body:     0;
  --lx-tracking-eyebrow:  0.16em;

  /* ---------- 04. RUANG & GRID (Bab 11) ---------- */
  --lx-container:     1280px;
  --lx-container-nar: 880px;   /* kolom teks panjang */
  --lx-gutter:        clamp(1.25rem, 0.75rem + 1.6vw, 2rem);
  --lx-grid-cols:     12;
  --lx-grid-gap:      clamp(1rem, 0.5rem + 1.4vw, 2rem);

  --lx-space-1:  0.25rem;
  --lx-space-2:  0.5rem;
  --lx-space-3:  0.75rem;
  --lx-space-4:  1rem;
  --lx-space-5:  1.5rem;
  --lx-space-6:  2rem;
  --lx-space-7:  2.5rem;
  --lx-space-8:  3rem;
  --lx-space-9:  4rem;
  --lx-space-10: 5rem;

  /* Jarak antar-section: mobile 56–80, desktop 96–140 */
  --lx-section-y:    clamp(3.5rem, 1.6rem + 6.4vw, 8.75rem);
  --lx-section-y-sm: clamp(2.75rem, 1.6rem + 3.6vw, 5.5rem);

  --lx-header-h:      76px;
  --lx-header-h-sm:   64px;

  /* ---------- 05. RADIUS & BAYANGAN ---------- */
  --lx-radius-xs:   4px;
  --lx-radius-sm:   6px;
  --lx-radius-md:   10px;
  --lx-radius-lg:   16px;
  --lx-radius-pill: 999px;

  --lx-shadow-sm: 0 1px 2px rgba(7,26,43,.06), 0 1px 3px rgba(7,26,43,.05);
  --lx-shadow-md: 0 4px 12px rgba(7,26,43,.07), 0 2px 4px rgba(7,26,43,.04);
  --lx-shadow-lg: 0 18px 44px rgba(7,26,43,.12), 0 4px 10px rgba(7,26,43,.05);
  --lx-shadow-focus: 0 0 0 3px rgba(2,135,208,.38);

  /* ---------- 05b. TOMBOL PRIMER ----------
     Keputusan disetujui: Opsi B. Latar tetap oranye merek #FF6200, label
     memakai navy #071A2B. Rasio kontras 5,87:1 — lolos WCAG AA untuk teks
     normal, dan hanya memakai dua warna yang sudah terkunci di palet.
     Lihat docs/accessibility-notes.md. */
  --lx-btn-primary-bg:       var(--lx-orange);
  --lx-btn-primary-fg:       var(--lx-navy);
  --lx-btn-primary-bg-hover: #FF7A26;   /* dicerahkan saat hover: navy di atasnya 7,15:1 */

  /* ---------- 06. MOTION (Bab 13/30) ---------- */
  --lx-ease:        cubic-bezier(.22,.61,.36,1);
  --lx-ease-out:    cubic-bezier(.16,1,.3,1);
  --lx-dur-fast:    150ms;
  --lx-dur-base:    260ms;
  --lx-dur-slow:    520ms;
  --lx-dur-reveal:  760ms;

  /* ---------- 07. LAYER ---------- */
  --lx-z-base:    1;
  --lx-z-sticky:  100;
  --lx-z-drawer:  300;
  --lx-z-header:  350;  /* di atas drawer: tombol tutup harus tetap terlihat */
  --lx-z-modal:   400;
  --lx-z-toast:   500;
}

/* Skema gelap tidak dipakai sebagai mode global (brief menuntut identitas
   korporat konsisten). Navy dipakai sebagai "dark surface" per-section
   melalui utilitas .lx-dark di theme.css. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --lx-dur-fast: 0ms;
    --lx-dur-base: 0ms;
    --lx-dur-slow: 0ms;
    --lx-dur-reveal: 0ms;
  }
}