/* =====================================================================
   DESIGN SYSTEM — VARIABLES
   Nebula Creative / Aldi Wijaya Portfolio
   Sumber tunggal untuk seluruh design token. Semua file CSS lain WAJIB
   memakai token dari file ini — dilarang menulis angka mentah (magic
   number) untuk warna, font-size, radius, shadow, transition, spacing.
   ===================================================================== */

:root {
  color-scheme: dark;
  /* ---------- COLOR TOKENS (dark theme / default) ---------- */
  --bg: #1e2028;
  --bg-shadow-dark: #11131a;
  --bg-shadow-light: rgba(255,255,255,0.07);
  --primary: #818cf8;
  --primary-hover: #4f46e5;
  --primary-dim: rgba(129,140,248,0.15);
  --primary-border: rgba(129,140,248,0.2);
  --primary-border-hover: rgba(99,102,241,0.4);
  --surface: var(--bg);
  --surface-hover: var(--bg-shadow-light);
  --text: #dde0e8;
  --text-secondary: rgba(221,224,232,0.55);
  --text-sec: var(--text-secondary); /* alias lama, dipakai luas di seluruh section */
  --border: var(--primary-border);
  --border-hover: var(--primary-border-hover);
  --section-divider: rgba(129,140,248,0.09);
  --success: #22c55e;
  --warning: #f59e0b;
  --moon-color: #2CC6FE;
  --moon-glow: rgba(44,198,254,0.6);
  --scrollbar-track: #0e0f16;
  --scrollbar-thumb: #4a4870;
  --scrollbar-thumb-hover: #6e6aaa;
  --backdrop-bg: rgba(14,15,22,0.75);
  --loading-bg: #1e2028;
  --loading-text: #ffffff;
  --loading-text-sec: rgba(255,255,255,0.45);

  /* ---------- LAYOUT ---------- */
  --navbar-height: 48px;
  --max-width: 1500px;

  /* ---------- TYPOGRAPHY SCALE ----------
     Menggantikan seluruh ukuran acak (17.5 / 18.5 / 19.5 / 23.5 / 27.5px)
     dan puluhan variabel section-lokal (--aldi-fs-title, --cf-fs-title,
     --gp-fs-heading, --prtcln-fs-stat, --aldi-footer-fs-title, dst) yang
     sebelumnya duplikat nilai yang sama di banyak tempat. */
  --font-display: 'Cormorant Garamond', 'Didot', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-3xs: 10px;   /* label kecil / caption stat */
  --fs-2xs: 11px;   /* caption, footer copyright */
  --fs-xs:  12px;   /* button text, badge */
  --fs-sm:  13px;   /* navbar item, faq label */
  --fs-base:14px;   /* body text sekunder */
  --fs-md:  15px;   /* body text utama, card desc */
  --fs-lg:  16px;   /* card body besar */
  --fs-xl:  18px;   /* card title, popup title (ganti 18.5px) */
  --fs-2xl: 20px;   /* sub-heading */
  --fs-3xl: 24px;   /* section heading (ganti 23.5px) */
  --fs-4xl: 32px;   /* heading besar (loading screen pakai clamp terpisah) */
  --fs-hero-name: 28px; /* nama brand di About hero (ganti 27.5px) */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-tight: 1;
  --lh-snug: 1.3;
  --lh-normal: 1.4;

  --ls-tight: 0;
  --ls-wide: 0.5px;
  --ls-wider: 1px;

  /* Semantic aliases dipakai lintas komponen (bridging — akan
     dipakai langsung menggantikan variabel section-lokal saat
     Tahap 2 pemisahan file dilakukan) */
  --fs-heading: var(--fs-3xl);       /* dulu: 23.5px, tersebar di ~8 section */
  --fs-card-title: var(--fs-xl);     /* dulu: 18.5px */
  --fs-card-desc: var(--fs-md);      /* dulu: 15px */
  --fs-body-sm: var(--fs-base);      /* dulu: 14.5px */
  --fs-btn: var(--fs-xs);            /* dulu: 12.5px */
  --fs-popup-title: var(--fs-xl);
  --fs-popup-h3: var(--fs-sm);
  --fs-popup-body: var(--fs-text1);
  --fs-popup-btn: var(--fs-xs);

  /* ---------- RESPONSIVE TYPOGRAFI SCALE (TEXT 1 sebagai acuan) ----------
     Lihat spesifikasi "SETTINGAN ATURAN TIPOGRAFI" bagian 0. TEXT 1 adalah
     satu-satunya acuan (base); JUDUL1/TEXT3/TEXT4/TEXT5/TOMBOL punya nilai
     px sendiri yang berubah per breakpoint mengikuti tabel skala. JUDUL2
     dan TEXT2 nilainya identik dengan TEXT1 (bedanya cuma weight/kapital),
     jadi cukup di-alias, tidak perlu breakpoint terpisah.
     Default di bawah ini = tier Desktop (1025-1440px). */
  --fs-text1: 14px;
  --fs-judul1: 18px;
  --fs-stat-num: 15px;
  --fs-judul2: var(--fs-text1);
  --fs-text2: var(--fs-text1);
  --fs-text3: 12px;
  --fs-text4: 12px;
  --fs-text5: 9px;
  --fs-tombol: 11px;

  /* ---------- BORDER RADIUS SCALE ----------
     Menggantikan >20 nilai radius acak (1px, 2px, 8-32px campur). */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-pill: 50px;
  --radius-circle: 50%;

  --card-radius: var(--radius-xl);
  --card-radius-mobile: var(--radius-md);

  /* ---------- SHADOW TOKENS (neumorphic) ----------
     Menggantikan 51+ deklarasi box-shadow manual yang beda-beda tipis
     (mis. 4px 4px 6.5px vs 4px 4px 7px vs 4px 4px 8px). */
  --shadow-sm: 4px 4px 8px var(--bg-shadow-dark), -2px -2px 5px var(--bg-shadow-light);
  --shadow-md: 5px 5px 11px var(--bg-shadow-dark), -2px -2px 7px var(--bg-shadow-light);
  --shadow-lg: 6px 6px 12px var(--bg-shadow-dark), -4px -4px 8px var(--bg-shadow-light);
  --shadow-pressed: 2px 2px 4px var(--bg-shadow-dark), -1px -1px 3px var(--bg-shadow-light);
  --shadow-inset-sm: inset 3px 3px 6px var(--bg-shadow-dark), inset -1px -1px 4px var(--bg-shadow-light);
  --shadow-inset: inset 4px 4px 8px var(--bg-shadow-dark), inset -2px -2px 6px var(--bg-shadow-light);
  --shadow-float: 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18);
  --shadow-modal: 6px 6px 20px rgba(0,0,0,0.5);

  /* Alias lama (dipertahankan agar kompatibel selama migrasi Tahap 2) */
  --neu-out: var(--shadow-md);
  --neu-out-sm: var(--shadow-sm);
  --neu-in: var(--shadow-inset);
  --neu-in-sm: var(--shadow-inset-sm);
  --neu-primary-hover: var(--primary-hover);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --card-lift: -4px;

  /* ---------- TRANSITION TOKENS ----------
     Menggantikan >25 kombinasi durasi/easing berbeda untuk efek yang
     secara visual sama (hover shadow+transform, fade, dsb). */
  --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s var(--ease-standard);
  --transition-slow: 0.4s var(--ease-standard);
  --transition-fade: 0.25s ease;

  /* Kombinasi siap-pakai untuk pola hover paling umum di seluruh site */
  --transition-hover: box-shadow var(--transition-fast), transform var(--transition-fast);
  --transition-theme: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;

  /* ---------- SPACING SCALE ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* jarak aman dari tepi atas viewport, dipakai navbar & spacer-nya biar gak mentok */
  --navbar-top-gap: var(--space-6);

  --section-py: var(--space-8);
  --section-px: var(--space-4);

  /* ---------- ICON SIZE SCALE ---------- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
}

/* ---------- LIGHT THEME OVERRIDES ---------- */
[data-theme="light"] {
  color-scheme: light;
  --bg: #d9dfe9;
  --bg-shadow-dark: #a4b0c5;
  --bg-shadow-light: rgba(255,255,255,0.88);
  --primary: #6366f1;
  --primary-hover: #6366f1;
  --primary-dim: rgba(99,102,241,0.1);
  --primary-border: rgba(99,102,241,0.2);
  --section-divider: rgba(99,102,241,0.1);
  --text: #363455;
  --text-secondary: rgba(54,52,85,0.72);
  --moon-color: #6366f1;
  --moon-glow: rgba(99,102,241,0.4);
  --scrollbar-track: #c8d0de;
  --scrollbar-thumb: #9aa5b8;
  --scrollbar-thumb-hover: #7b8eaa;
  --backdrop-bg: rgba(180,186,200,0.65);
  --loading-bg: #d9dfe9;
  --loading-text: #363455;
  --loading-text-sec: rgba(54,52,85,0.65);
  --neu-primary-hover: var(--primary-hover);
}

/* ---------- RESPONSIVE TYPOGRAFI SCALE — BREAKPOINT OVERRIDES ----------
   Mengikuti breakpoint yang sudah dipakai di seluruh file CSS:
   Mobile Kecil <=480, Mobile Besar 481-768, Tablet 769-1024 (481-768 dan
   769-1024 punya nilai identik di tabel skala sehingga cukup satu blok
   max-width:1024px), Desktop 1025-1440 (nilai default di :root di atas),
   Desktop Besar >=1441. */
@media (min-width: 1441px) {
  :root {
    --fs-text1: 15px;
    --fs-judul1: 19px;
    --fs-stat-num: 16px;
    --fs-text3: 13px;
    --fs-text4: 13px;
    --fs-text5: 10px;
    --fs-tombol: 12px;
  }
}
@media (max-width: 1024px) {
  :root {
    --fs-text1: 13px;
    --fs-judul1: 17px;
    --fs-stat-num: 14px;
    --fs-text3: 11px;
    --fs-text4: 11px;
    --fs-text5: 9px;
    --fs-tombol: 10px;
  }
}
@media (max-width: 480px) {
  :root {
    --fs-text1: 12px;
    --fs-judul1: 16px;
    --fs-stat-num: 13px;
    --fs-text3: 10px;
    --fs-text4: 10px;
    --fs-text5: 9px;
    --fs-tombol: 9px;
  }
}