/* ═══════════════════════════════════════
   variables.css — Design tokens
═══════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --color-bg:        #0a0a0f;
  --color-bg2:       #0f0f16;
  --color-bg3:       #14141e;
  --color-surface:   #1a1a26;
  --color-surface2:  #22223a;

  --color-border:    rgba(255, 255, 255, 0.07);
  --color-border2:   rgba(255, 255, 255, 0.12);

  --color-accent:    #c9a96e;
  --color-accent2:   #e8c98a;
  --color-accent-dim: rgba(201, 169, 110, 0.15);
  --color-accent-glow: rgba(201, 169, 110, 0.08);

  --color-text:      #e8e6f0;
  --color-muted:     #8a87a0;
  --color-dim:       #5a5870;
  --color-white:     #ffffff;

  --color-green:     #6ee7a0;
  --color-header-bg: rgba(10, 10, 15, 0.92);

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', serif;
  --font-mono:    'DM Mono', monospace;
  --font-body:    'Outfit', sans-serif;

  /* ── Spacing ── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  60px;
  --space-2xl: 100px;

  /* ── Borders ── */
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* ── Motion ── */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --duration:  0.35s;
  --transition: var(--duration) var(--ease);
}

[data-theme="light"] {
  --color-bg:        #faf9f6; /* Off-white hangat premium */
  --color-bg2:       #f3f1ec; /* Warna latar belakang selang-seling */
  --color-bg3:       #eae7df; /* Warna box/pills */
  --color-surface:   #ffffff; /* Kartu utama */
  --color-surface2:  #eae7df; /* Hover kartu/elemen */

  --color-border:    rgba(0, 0, 0, 0.06);
  --color-border2:   rgba(0, 0, 0, 0.12);

  --color-accent:    #9e7d3b; /* Emas gelap untuk kontras lebih baik di latar terang */
  --color-accent2:   #bd9c5a;
  --color-accent-dim: rgba(158, 125, 59, 0.1);
  --color-accent-glow: rgba(158, 125, 59, 0.05);

  --color-text:      #1a1a20; /* Teks utama */
  --color-muted:     #5b5a6c; /* Teks sekunder */
  --color-dim:       #8a899c; /* Teks redup */
  --color-white:     #1a1a20; /* Memetakan judul/logo yang sebelumnya putih menjadi gelap */

  --color-green:     #1b8a5a;
  --color-header-bg: rgba(250, 249, 246, 0.92);
}