/* ==========================================================================
   RESET & DASAR VARIABEL (Mendukung Dark/Light Mode & Brand Hijau/Hitam)
   ========================================================================== */
:root {
    --font-primary: 'Inter', sans-serif;
    
    /* Brand Color Base */
    --brand-green: #2ecc71;     /* Hijau Utama */
    --brand-green-hover: #27ae60;
    --brand-black: #111111;     /* Hitam Utama */
    --brand-white: #ffffff;
    
    /* Light Mode Tokens default */
    --bg-main: #ffffff;
    --bg-surface: #f9f9f9;
    --text-main: #111111;
    --text-muted: #666666;
    --border-color: #e0e0e0;
    
    /* Header & Footer default sesuai request */
    --header-bg: var(--brand-black);
    --header-text: var(--brand-white);
    --footer-bg: var(--brand-black);
    --footer-text: var(--brand-white);
    
    --hero-bg: var(--brand-white);
    --hero-text: var(--brand-black);
    
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
     /* Container */
    --container-a: 1400px;
    --container-full: 100%;
}

/* Mengesampingkan Variabel Saat Dark Mode Aktif */
body.dark-mode {
    --bg-main: #121212;
    --bg-surface: #1e1e1e;
    --text-main: #f5f5f5;
    --text-muted: #aaaaaa;
    --border-color: #333333;
    
    /* Di dark mode, warna header & footer menyesuaikan agar menyatu */
    --header-bg: #1a1a1a;
    --header-text: var(--brand-white);
    --footer-bg: #1a1a1a;
    --footer-text: var(--brand-white);
    
    --hero-bg: #1a1a1a;
    --hero-text: var(--brand-white);
    --border-color: #222222;
}