/* ============================================================
   VELDION V5 — tokens.css
   Design tokens: warna, tipografi, spacing, radius, shadow.
   Semua warna terpusat di sini — ubah di sini, ubah di seluruh situs.
   ============================================================ */

:root {

  /* ===== WARNA — BASE (Creamy) ===== */
  --cream-50:  #FCFAF5;   /* surface card, elemen terang */
  --cream-100: #F5F2EC;   /* background utama halaman */
  --cream-200: #EBE7DF;   /* background section */
  --cream-300: #E0DCD3;   /* border pucat */

  /* ===== WARNA — IDENTITAS (dari logo) ===== */
  --charcoal:      #1A1C1F;   /* teks utama, elemen gelap */
  --charcoal-soft: #2E3033;   /* teks heading */
  --silver-dark:   #5A6065;   /* silver tua */
  --silver:        #8A9095;   /* silver utama (aksen identitas) */
  --silver-light:  #C0C5CE;   /* silver terang */
  --silver-pale:   #D9D6D0;   /* border silver pucat */

  /* ===== WARNA — AKSEN HANGAT (kecil saja) ===== */
  --peach:  #F1D3B2;   /* sentuhan hangat, personal */
  --bronze: #A67C52;   /* aksen premium: harga, badge, CTA */

  /* ===== WARNA — FUNGSIONAL (status) ===== */
  --success: #5E7A5E;   /* ready, live, aktif */
  --warning: #C99A4A;   /* coming soon, perhatian */
  --error:   #B85C4A;   /* error, gagal */

  /* ===== ALIAS SEMANTIK (biar enak dipakai) ===== */
  --bg:            var(--cream-100);
  --bg-section:    var(--cream-200);
  --surface:       var(--cream-50);
  --border:        var(--cream-300);
  --border-silver: var(--silver-pale);

  --text:          var(--charcoal);
  --text-heading:  var(--charcoal-soft);
  --text-muted:    var(--silver);
  --text-inverse:  var(--cream-50);

  --accent:        var(--silver);
  --accent-dark:   var(--silver-dark);
  --accent-light:  var(--silver-light);
  --accent-warm:   var(--peach);
  --accent-premium: var(--bronze);

  /* ===== TIPOGRAFI ===== */
  --font-sans:  'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:  'GeistMono', 'Courier New', monospace;
  --font-pixel: 'GeistPixel', monospace;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.05em;
  --ls-wider:  0.1em;

  /* ===== SPACING (skala 4px) ===== */
  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ===== RADIUS ===== */
  --radius-sm:   6px;
  --radius:      12px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* ===== SHADOW (halus, bukan glow) ===== */
  --shadow-xs: 0 1px 2px rgba(26, 28, 31, 0.04);
  --shadow-sm: 0 2px 6px rgba(26, 28, 31, 0.05);
  --shadow:    0 4px 12px rgba(26, 28, 31, 0.06);
  --shadow-md: 0 8px 20px rgba(26, 28, 31, 0.07);
  --shadow-lg: 0 16px 40px rgba(26, 28, 31, 0.08);
  --shadow-xl: 0 24px 64px rgba(26, 28, 31, 0.10);

  /* ===== BORDER ===== */
  --border-width: 1px;
  --border-color: var(--cream-300);

  /* ===== TRANSISI ===== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-instant: 100ms;
  --duration-fast:   150ms;
  --duration:        250ms;
  --duration-slow:   400ms;

  /* ===== LAYOUT ===== */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1320px;

  /* ===== FIXED ELEMENT HEIGHTS ===== */
  --topbar-h:     36px;
  --header-h:     72px;
  --mobile-nav-h: 72px;

  /* ===== Z-INDEX ===== */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-header:  300;
  --z-modal:   1000;
  --z-toast:   1100;
  --z-loader:  9999;
}