/**
 * ============================================================
 * MENTAYA — Design Tokens & CSS Variables
 * File    : css/variables.css
 * Purpose : Single source of truth untuk semua nilai desain.
 *           Semua warna, spacing, shadow, dan radius didefinisikan
 *           di sini. JANGAN hardcode nilai desain di tempat lain.
 * Audit   : Perubahan visual cukup dilakukan di file ini.
 * ============================================================
 */

:root {

  /* ── BRAND COLORS ──────────────────────────────────────────
   * Palet hijau hutan mencerminkan nilai Eco Office.
   * Gunakan --forest untuk elemen dominan (nav, header).
   * Gunakan --leaf untuk aksi utama (tombol, link aktif).
   * Gunakan --sage & --mint untuk aksen dan highlight.
   */
  --color-forest:       #1a4d2e;
  --color-leaf:         #2d7a4f;
  --color-sage:         #4aab6d;
  --color-mint:         #a8e6c1;
  --color-mint-soft:    rgba(168, 230, 193, 0.18);

  /* ── NEUTRAL / BASE ────────────────────────────────────────
   * Warna netral untuk teks, latar, dan border.
   */
  --color-cream:        #f6f2eb;
  --color-warm:         #fffdf7;
  --color-bark:         #5c3d2e;
  --color-amber:        #d4a851;
  --color-text:         #1c2b1e;
  --color-muted:        #7a8c7d;
  --color-border:       #dae8de;
  --color-border-focus: #4aab6d;

  /* ── SEMANTIC COLORS ───────────────────────────────────────
   * Warna yang memiliki makna fungsional.
   */
  --color-success:      #2d7a4f;
  --color-success-bg:   rgba(45, 122, 79, 0.10);
  --color-warning:      #d4a851;
  --color-warning-bg:   rgba(212, 168, 81, 0.12);
  --color-danger:       #c0392b;
  --color-danger-bg:    rgba(192, 57, 43, 0.08);
  --color-info:         #2980b9;
  --color-info-bg:      rgba(41, 128, 185, 0.10);

  /* ── CATEGORY COLORS ───────────────────────────────────────
   * Setiap kategori checklist punya identitas warna sendiri.
   * Dipakai di ikon, progress bar, dan badge kategori.
   */
  --cat-psh-color:      #315f4b;
  --cat-psh-bg:         rgba(49, 95, 75, 0.10);
  --cat-pel-color:      #315f4b;
  --cat-pel-bg:         rgba(49, 95, 75, 0.10);
  --cat-ppa-color:      #315f4b;
  --cat-ppa-bg:         rgba(49, 95, 75, 0.10);
  --cat-prk-color:      #315f4b;
  --cat-prk-bg:         rgba(49, 95, 75, 0.10);
  --cat-pku-color:      #315f4b;
  --cat-pku-bg:         rgba(49, 95, 75, 0.10);

  /* ── TYPOGRAPHY ────────────────────────────────────────────
   * Lora: display font — judul, angka besar, branding
   * DM Sans: body font — teks paragraf, label, UI
   */
  --font-display:       'Lora', Georgia, serif;
  --font-body:          'DM Sans', 'Segoe UI', sans-serif;

  --text-xs:            11px;
  --text-sm:            13px;
  --text-base:          15px;
  --text-md:            17px;
  --text-lg:            20px;
  --text-xl:            24px;
  --text-2xl:           30px;
  --text-3xl:           38px;

  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;

  /* ── SPACING ───────────────────────────────────────────────
   * Skala 4px — semua spacing adalah kelipatan 4.
   */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;

  /* ── BORDER RADIUS ───────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    8px;
  --radius-xl:    8px;
  --radius-full:  9999px;

  /* ── SHADOWS ───────────────────────────────────────────────
   * Shadow menggunakan warna forest agar terasa natural/organik.
   */
  --shadow-xs:  0 1px 4px rgba(26, 77, 46, 0.08);
  --shadow-sm:  0 2px 12px rgba(26, 77, 46, 0.10);
  --shadow-md:  0 4px 24px rgba(26, 77, 46, 0.13);
  --shadow-lg:  0 12px 48px rgba(26, 77, 46, 0.18);
  --shadow-xl:  0 24px 80px rgba(0, 0, 0, 0.28);

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --transition-fast:    0.15s ease;
  --transition-base:    0.25s ease;
  --transition-slow:    0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --nav-height:         64px;
  --bottomnav-height:   64px;
  --content-max-width:  720px;
  --sidebar-width:      260px;

  /* ── Z-INDEX SCALE ─────────────────────────────────────────
   * Skala terpusat agar tidak ada konflik z-index.
   */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
}