/* ==========================================================================
   VARIABLES.CSS — Design Token System
   KKN Tematik Universitas Nurtanio Bandung 2026 · Kelompok 07 · Desa Cipada
   Tema: "Spirit of Mount Burangrang"
   --------------------------------------------------------------------------
   Semua warna, tipografi, spasi, radius, shadow, dan easing didefinisikan
   di satu tempat. Ubah nilai di sini untuk mengubah seluruh tampilan situs.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. PALET IDENTITAS VISUAL
     Diambil dari lanskap Gunung Burangrang: abu vulkanik, lumut hutan,
     cahaya matahari terbit, dan kabut biru pegunungan.
     ---------------------------------------------------------------------- */
  --volcanic-ash: #2B2D2E;   /* Abu vulkanik — teks utama & latar gelap  */
  --moss-green:   #4A7C59;   /* Hijau lumut — warna merek utama         */
  --sunrise-gold: #F4A261;   /* Emas matahari terbit — aksen & sorotan  */
  --sky-mountain: #6A9FC0;   /* Biru kabut — aksen sekunder             */
  --forest:       #2E7D32;   /* Hijau hutan — kedalaman & kontras       */
  --light-green:  #4CAF50;   /* Hijau muda — status positif & badge     */
  --white:        #FFFFFF;

  /* Turunan palet (dihitung manual agar tidak perlu preprocessor) */
  --ash-900: #16181A;
  --ash-800: #1F2223;
  --ash-700: #2B2D2E;
  --ash-600: #3A3D3E;
  --ash-500: #55595B;
  --ash-400: #7C8183;
  --ash-300: #A8ADAF;
  --ash-200: #D2D6D7;
  --ash-100: #E9ECEC;
  --ash-050: #F5F7F6;

  --moss-900: #24402E;
  --moss-700: #35603F;
  --moss-600: #4A7C59;
  --moss-400: #7BA688;
  --moss-200: #C3D8C9;
  --moss-050: #EEF4F0;

  --gold-700: #C8783B;
  --gold-600: #E08B45;
  --gold-500: #F4A261;
  --gold-300: #F9C79A;
  --gold-100: #FDEBD9;

  --sky-700: #43708F;
  --sky-500: #6A9FC0;
  --sky-300: #A3C5DA;
  --sky-100: #E4EEF5;

  /* ----------------------------------------------------------------------
     2. WARNA SEMANTIK (dipakai komponen, bukan warna mentah)
     Nilai di sini di-override pada [data-theme="dark"].
     ---------------------------------------------------------------------- */
  --bg:            #FBFCFB;  /* Latar halaman                     */
  --bg-alt:        #F2F6F3;  /* Latar section bergantian          */
  --bg-deep:       var(--ash-900); /* Latar section gelap         */
  --surface:       var(--white);   /* Kartu & panel               */
  --surface-2:     #F7F9F8;
  --border:        rgba(43, 45, 46, 0.10);
  --border-strong: rgba(43, 45, 46, 0.18);

  --text:          var(--ash-700);
  --text-strong:   var(--ash-900);
  --text-muted:    var(--ash-500);
  --text-faint:    var(--ash-400);
  --text-invert:   var(--white);

  --brand:         var(--moss-600);
  --brand-deep:    var(--moss-900);
  --accent:        var(--sunrise-gold);
  --accent-cool:   var(--sky-500);
  --success:       var(--light-green);

  /* Glassmorphism */
  --glass-bg:      rgba(255, 255, 255, 0.62);
  --glass-bg-dark: rgba(22, 24, 26, 0.42);
  --glass-border:  rgba(255, 255, 255, 0.28);
  --glass-blur:    blur(20px) saturate(150%);

  /* Gradien tematik */
  --grad-sunrise:  linear-gradient(135deg, #F9C79A 0%, #F4A261 45%, #C8783B 100%);
  --grad-moss:     linear-gradient(150deg, #4A7C59 0%, #2E7D32 60%, #24402E 100%);
  --grad-mist:     linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(227,238,244,0.85) 70%, #FBFCFB 100%);
  --grad-dusk:     linear-gradient(180deg, #16181A 0%, #2B2D2E 45%, #43708F 100%);
  --grad-hero-veil: linear-gradient(180deg, rgba(22,24,26,0.58) 0%, rgba(22,24,26,0.20) 38%, rgba(22,24,26,0.72) 100%);

  /* ----------------------------------------------------------------------
     3. TIPOGRAFI
     Display : Bebas Neue  — judul besar, tinggi & tegas seperti punggungan
     Sub     : Oswald      — eyebrow, angka, label data
     Body    : Poppins     — paragraf utama
     UI      : Inter       — antarmuka, tabel, tombol kecil
     Accent  : Playfair    — kutipan & kalimat naratif
     ---------------------------------------------------------------------- */
  --font-display: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --font-sub:     'Oswald', 'Bebas Neue', sans-serif;
  --font-body:    'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
  --font-ui:      'Inter', 'Poppins', system-ui, sans-serif;
  --font-accent:  'Playfair Display', Georgia, serif;

  /* Skala tipe fluid — clamp(min, preferensi, max) */
  --fs-display-xl: clamp(3.6rem, 12vw, 9.5rem);
  --fs-display-l:  clamp(2.9rem, 8vw, 6rem);
  --fs-display-m:  clamp(2.2rem, 5.4vw, 3.9rem);
  --fs-h2:         clamp(1.9rem, 4.2vw, 3.1rem);
  --fs-h3:         clamp(1.35rem, 2.4vw, 1.85rem);
  --fs-h4:         clamp(1.1rem, 1.7vw, 1.3rem);
  --fs-lead:       clamp(1rem, 1.5vw, 1.18rem);
  --fs-body:       clamp(0.94rem, 1.1vw, 1rem);
  --fs-small:      clamp(0.82rem, 1vw, 0.9rem);
  --fs-micro:      clamp(0.68rem, 0.85vw, 0.76rem);

  --lh-tight: 0.92;
  --lh-snug:  1.18;
  --lh-body:  1.75;

  --ls-display: 0.012em;
  --ls-eyebrow: 0.28em;
  --ls-caps:    0.14em;

  /* ----------------------------------------------------------------------
     4. RUANG & LAYOUT
     ---------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --section-y:   clamp(64px, 9vw, 132px);
  --gutter:      clamp(18px, 5vw, 56px);
  --maxw:        1320px;
  --maxw-narrow: 820px;
  --nav-h:       72px;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* Elevasi — lembut, meniru kabut daripada kotak bayangan tegas */
  --sh-1: 0 1px 2px rgba(22, 24, 26, 0.05), 0 2px 8px rgba(22, 24, 26, 0.04);
  --sh-2: 0 4px 14px rgba(22, 24, 26, 0.06), 0 12px 32px -12px rgba(22, 24, 26, 0.10);
  --sh-3: 0 10px 30px -8px rgba(22, 24, 26, 0.12), 0 28px 60px -24px rgba(36, 64, 46, 0.18);
  --sh-4: 0 24px 70px -20px rgba(22, 24, 26, 0.28);
  --sh-glow-gold: 0 8px 28px -6px rgba(244, 162, 97, 0.45);
  --sh-glow-moss: 0 8px 28px -6px rgba(74, 124, 89, 0.35);

  /* Gerak */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-mid:  380ms;
  --dur-slow: 720ms;

  /* Lapisan (z-index) */
  --z-topo: 0;
  --z-content: 1;
  --z-sticky: 500;
  --z-nav: 1000;
  --z-drawer: 1200;
  --z-modal: 1400;
  --z-loader: 1900;
  --z-cursor: 2000;
}

/* ==========================================================================
   DARK MODE — "Malam di Burangrang"
   Diaktifkan via [data-theme="dark"] pada <html> (tombol di navbar),
   dan otomatis mengikuti preferensi sistem bila belum pernah dipilih.
   ========================================================================== */
[data-theme="dark"] {
  --bg:            #121415;
  --bg-alt:        #191C1D;
  --bg-deep:       #0C0E0F;
  --surface:       #1D2122;
  --surface-2:     #232829;
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);

  --text:          #DFE4E2;
  --text-strong:   #F4F7F5;
  --text-muted:    #9BA3A2;
  --text-faint:    #757D7C;
  --text-invert:   #121415;

  --brand:         #6FA37D;
  --accent:        #F6B27C;
  --accent-cool:   #83B4D2;

  --glass-bg:      rgba(29, 33, 34, 0.62);
  --glass-border:  rgba(255, 255, 255, 0.10);

  --grad-mist:     linear-gradient(180deg, rgba(18,20,21,0) 0%, rgba(25,28,29,0.9) 70%, #121415 100%);
  --sh-2: 0 4px 14px rgba(0, 0, 0, 0.34), 0 12px 32px -12px rgba(0, 0, 0, 0.5);
  --sh-3: 0 10px 30px -8px rgba(0, 0, 0, 0.5), 0 28px 60px -24px rgba(0, 0, 0, 0.6);
}

/* Hormati preferensi sistem selama pengguna belum memilih tema manual */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
  }
}