/* ==========================================================================
   demiAIplus · Design tokens (fondasi visual, fase 4)
   Satu-satunya tempat warna, huruf, jarak, dan sudut didefinisikan.
   Ubah di sini, semua halaman ikut berubah. Jangan menulis kode warna
   langsung di halaman: selalu pakai var(--nama-token).
   ========================================================================== */

:root {
  /* --- Warna brand ------------------------------------------------------ */
  --navy-900: #0D2E4D;   /* logo, teks utama */
  --navy-700: #1E4A70;   /* hover, judul di latar gelap */
  --navy-500: #2F6FA8;   /* tautan */
  --navy-300: #9CBBD8;   /* garis, ilustrasi */
  --navy-100: #E3EBF2;   /* latar lembut */

  --green-900: #00521F;  /* hover tombol */
  --green-700: #00702F;  /* teks & tombol hijau */
  --green-500: #008937;  /* logo, aksen besar (jangan untuk teks kecil) */
  --green-400: #2DB36A;  /* aksen di latar gelap */
  --green-100: #E6F2EA;  /* latar sorotan */

  /* --- Netral: tema terang ----------------------------------------------- */
  --bg: #F6F8F7;
  --surface: #FFFFFF;
  --line: #DCE5E0;
  --text-faint: #5F717C;
  --text-2: #4A5D6A;
  --text: #0D2E4D;

  /* --- Netral: tema gelap (video, thumbnail, bagian gelap di website) ---- */
  --dark-bg: #081A2A;
  --dark-video: #0D2E4D;
  --dark-surface: #0E263B;
  --dark-line: #1E3A52;
  --dark-text-2: #A6B9C4;
  --dark-text: #EAF1EE;

  /* --- Bagian konsultasi (formal, abu tua menuju hitam) ---------------
     Pengecualian dari aturan "latar gelap = navy" atas permintaan Khai,
     khusus bagian konsultasi. Untuk kembali ke navy, ganti dua nilai
     pertama dengan var(--dark-video) dan var(--dark-bg). */
  --consult-from: #1C2024;
  --consult-to: #0E1012;
  --consult-surface: #23282D;
  --consult-line: #343B42;
  --consult-text: #EEF1F0;
  --consult-text-2: #B3BCC2;

  /* --- Status (selalu bersama ikon + label) ----------------------------- */
  --status-good: #00702F;      --status-good-dark: #2DB36A;     /* Lunas */
  --status-warn: #9A6A00;      --status-warn-dark: #E0A82E;     /* Perlu dicek */
  --status-serious: #B4521A;   --status-serious-dark: #E8834A;  /* Belum bayar */
  --status-critical: #A81C34;  --status-critical-dark: #FF5C78; /* Selisih, kritis */

  /* --- Palet grafik Nusantara (urutan tetap, maksimal 8) ----------------- */
  --chart-1: #008937; /* Daun */     --chart-1-dark: #289C49;
  --chart-2: #135A98; /* Nila */     --chart-2-dark: #2F72B2;
  --chart-3: #B5502C; /* Bata */     --chart-3-dark: #C9623F;
  --chart-4: #7A4A9A; /* Terong */   --chart-4-dark: #8C5CAD;
  --chart-5: #9E7917; /* Tembakau */ --chart-5-dark: #B18B30;
  --chart-6: #0E8AB0; /* Laut */     --chart-6-dark: #2F9DC3;
  --chart-7: #D29A18; /* Kunyit */   --chart-7-dark: #BE8700;
  --chart-8: #CC5F7E; /* Jambu */    --chart-8-dark: #D76988;
  --chart-muted: #C9D5CF;            --chart-muted-dark: #2A4760; /* pola sorot */

  /* --- Huruf ------------------------------------------------------------- */
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Bitter", Georgia, serif;          /* judul besar saja */
  --font-hand: "Playpen Sans", "Comic Sans MS", cursive; /* coretan anotasi */
  --font-code: "IBM Plex Mono", ui-monospace, Consolas, monospace; /* rumus & kode */

  /* Skala ukuran web (rasio 1,25) */
  --fs-12: 0.75rem;  --fs-14: 0.875rem; --fs-16: 1rem;     --fs-20: 1.25rem;
  --fs-25: 1.5625rem; --fs-31: 1.9375rem; --fs-39: 2.4375rem; --fs-49: 3.0625rem; --fs-61: 3.8125rem;

  /* --- Jarak (kelipatan 4) ---------------------------------------------- */
  --sp-4: 4px;  --sp-8: 8px;  --sp-12: 12px; --sp-16: 16px; --sp-24: 24px;
  --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-96: 96px;

  /* --- Sudut (patokan: sudut sel = 20% sisi) ----------------------------- */
  --r-cell: 4px;   /* sel, chip kecil */
  --r-btn: 12px;   /* tombol, input */
  --r-card: 18px;  /* kartu */
  --r-pill: 999px; /* pil */

  /* --- Ikon (Lucide, stroke 2.25) ---------------------------------------- */
  --icon-stroke: 2.25;
  --icon-16: 16px; --icon-20: 20px; --icon-24: 24px; --icon-32: 32px; --icon-48: 48px;

  /* --- Tata letak -------------------------------------------------------- */
  --container: 1120px;
}