/* ==========================================================================
   DWARSA DIGITAL DYNAMICS: DESIGN TOKENS
   Tema terang: putih bersih, teks grafit, dan satu aksen emas tua.
   File ini hanya berisi variabel. Jangan menaruh selector komponen di sini.

   CATATAN PERALIHAN DARI TEMA GELAP.
   Saat latar berubah dari hitam ke putih, peran warna ikut terbalik. Di tema
   gelap, warna yang paling TERANG adalah yang paling terbaca; di tema terang,
   yang paling PEKAT. Karena itu tangga --accent-1..4 dibalik urutannya:
   sekarang --accent-1 adalah emas paling pekat (untuk teks dan ikon) dan
   --accent-4 yang paling muda (untuk isian lembut).

   Setiap nilai di bawah sudah dihitung kontrasnya terhadap putih. Angka yang
   tertulis di komentar adalah rasio sesungguhnya, bukan perkiraan.
   ========================================================================== */

:root {
  /* ---------- Warna dasar ---------- */
  --bg:            #ffffff;
  --bg-soft:       #fafafa;
  --surface:       #f7f7f9;
  --surface-2:     #f2f2f5;
  --surface-3:     #e9e9ee;
  --surface-4:     #dcdce3;

  --line:          rgba(13, 13, 18, 0.08);
  --line-2:        rgba(13, 13, 18, 0.14);
  --line-3:        rgba(13, 13, 18, 0.24);

  --text:          #0d0d12;   /* 19,4:1 */
  --text-2:        #3d3d47;   /* 10,7:1 */
  --muted:         #5f5f6b;   /*  6,3:1 */
  --dim:           #6b6b78;   /*  5,3:1 */
  /* Hanya untuk hiasan: nomor urut besar, pemisah '/', dan ikon daftar.
     Sengaja hanya 2,07:1 terhadap putih. Jangan dipakai untuk teks yang
     harus dibaca; placeholder kolom isian memakai --dim (4,7:1). */
  --faint:         #b3b3c0;

  /* ---------- Aksen tunggal ----------
     Emas tua. Urutannya dari paling pekat ke paling muda, kebalikan dari
     tema gelap, supaya --accent-1 tetap berarti "yang paling menonjol". */
  --accent-1:      #6b5008;   /* paling pekat, teks aksen 7,6:1 */
  --accent-2:      #7a5c0d;   /* aksen utama              6,2:1 */
  --accent-3:      #8a6710;   /* teks sekunder & garis    5,2:1 */
  --accent-4:      #e3c46a;   /* isian lembut, bukan teks       */

  /* Emas terang khusus ISIAN yang di atasnya ada teks gelap, misalnya tombol
     utama dan pita penanda. Dipisahkan dari tangga di atas karena keduanya
     punya tugas berlawanan: tangga harus pekat agar terbaca di atas putih,
     isian harus terang agar teks gelap terbaca di atasnya (8,2:1). */
  --accent-fill:   #d4a017;
  --accent-fill-2: #e8b923;

  --accent-1-soft: rgba(212, 160, 23, 0.12);
  --accent-3-soft: rgba(184, 134, 11, 0.16);
  --accent-4-soft: rgba(212, 160, 23, 0.14);

  /* Gradien kilau untuk tombol. Tetap emas terang karena label di atasnya
     berwarna gelap; hentian tergelapnya masih 5,2:1. Panjang 200% supaya
     bisa dianimasikan lewat background-position. */
  --grad-accent: linear-gradient(
    100deg,
    #f6dc8a 0%,
    #d4a017 24%,
    #ffeeb0 46%,
    #a87d13 68%,
    #f0c645 100%
  );
  --grad-accent-soft: linear-gradient(
    100deg,
    rgba(246, 220, 138, 0.75) 0%,
    rgba(212, 160, 23, 0.75) 45%,
    rgba(168, 125, 19, 0.75) 100%
  );

  /* Gradien logam untuk headline besar. Di atas putih, emas tidak terbaca
     (hanya 1,6:1), jadi judul memakai grafit: pita gelap dan abu bergantian
     yang tetap terbaca sebagai permukaan logam. Hentian termudanya 6,8:1. */
  --grad-chrome: linear-gradient(
    177deg,
    #14141a 0%,
    #43434f 16%,
    #0e0e13 34%,
    #5a5a68 47%,
    #101016 58%,
    #3a3a46 72%,
    #0d0d12 88%,
    #4a4a58 100%
  );
  /* Versi sedikit lebih lembut, dipakai untuk judul hero. Terendah 6,6:1. */
  --grad-chrome-cool: linear-gradient(
    177deg,
    #1a1a20 0%,
    #4a4a56 14%,
    #15151b 31%,
    #5c5c6a 46%,
    #14141a 60%,
    #45454f 76%,
    #101015 90%,
    #38383f 100%
  );

  /* Kaca. Di tema gelap ini putih transparan; di tema terang harus gelap
     transparan, kalau tidak lapisannya tidak terlihat sama sekali. */
  --glass:         rgba(13, 13, 18, 0.03);
  --glass-2:       rgba(13, 13, 18, 0.06);
  --glass-blur:    saturate(140%) blur(18px);

  /* ---------- Bayangan & cahaya ----------
     Di tema gelap bayangan hampir tak terlihat, jadi kedalaman datang dari
     garis tepi. Di tema terang justru bayangan yang bekerja, jadi nilainya
     dinaikkan dan dibuat berlapis agar tetap lembut, bukan kotor. */
  --shadow-sm:     0 1px 2px rgba(13, 13, 18, 0.04), 0 2px 8px rgba(13, 13, 18, 0.04);
  --shadow:        0 2px 4px rgba(13, 13, 18, 0.04), 0 12px 28px rgba(13, 13, 18, 0.08);
  --shadow-lg:     0 4px 8px rgba(13, 13, 18, 0.05), 0 28px 64px rgba(13, 13, 18, 0.12);
  /* Kilau berwarna sengaja tidak dipakai lagi. Di atas hitam ia terbaca
     sebagai cahaya yang memancar; di atas putih emas transparan tidak punya
     apa pun untuk menyala, jadi hasilnya cuma noda kuning kabur di sekeliling
     elemen. Kedalaman di tema ini datang dari --shadow-*. Nilainya disimpan
     agar tidak ada yang rusak bila masih ada yang memanggilnya. */
  --glow-soft:  var(--shadow-sm);
  --glow-cool:  var(--shadow-sm);
  --glow-faint: var(--shadow-sm);
  --glow-wide:  var(--shadow);

  /* Merah galat. #ff6b8a hanya 2,7:1 di atas putih, terlalu tipis untuk
     pesan kesalahan. Diganti yang lebih pekat: 6,1:1. */
  --danger:        #c01c3c;
  --danger-soft:   rgba(192, 28, 60, 0.10);

  /* Hijau "berhasil/selesai". Panel admin punya tiga status yang sebelumnya
     semuanya bernuansa emas, jadi praktis tak terbedakan. Statusnya kini
     dipisah menurut warna, bukan cuma menurut kepekatan. 6,6:1 di atas putih. */
  --ok:            #0e6b35;
  --ok-soft:       rgba(21, 128, 61, 0.12);

  /* ---------- Radius ---------- */
  --r-xs:          8px;
  --r-sm:          12px;
  --r:             18px;
  --r-lg:          26px;
  --r-xl:          38px;
  --r-full:        999px;

  /* ---------- Tipografi ---------- */
  --f-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --f-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --fs-2xs:  0.7rem;
  --fs-xs:   0.775rem;
  --fs-sm:   0.875rem;
  --fs-base: clamp(0.95rem, 0.91rem + 0.18vw, 1.06rem);
  --fs-lg:   clamp(1.04rem, 0.99rem + 0.28vw, 1.18rem);
  --fs-xl:   clamp(1.35rem, 1.15rem + 0.95vw, 1.95rem);
  --fs-2xl:  clamp(1.85rem, 1.45rem + 1.9vw, 3rem);
  --fs-3xl:  clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem);
  --fs-4xl:  clamp(3rem, 1.9rem + 5.6vw, 7.5rem);
  --fs-hero: clamp(3.2rem, 1.6rem + 8vw, 11rem);

  --lh-tight: 0.94;
  --lh-snug:  1.16;
  --lh-body:  1.72;

  --ls-tight: -0.035em;
  --ls-wide:  0.16em;
  --ls-wider: 0.28em;

  /* ---------- Layout ---------- */
  --container:   1320px;
  --container-n: 1080px;   /* narrow, untuk artikel */
  --gut:         clamp(20px, 5vw, 68px);
  --sec-y:       clamp(72px, 11vh, 168px);
  --header-h:    76px;

  /* ---------- Gerak ---------- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:     0.18s;
  --t:          0.36s;
  --t-slow:     0.7s;

  /* ---------- Z-index ---------- */
  --z-bg:       0;
  --z-content:  1;
  /* Header harus di ATAS drawer. Kalau tidak, begitu menu mobile terbuka,
     overlay drawer menutupi tombol burger sehingga menunya tidak bisa
     ditutup lagi dengan jari. */
  --z-header:   95;
  --z-drawer:   90;
  --z-modal:    100;
  --z-toast:    110;
  --z-preload:  120;
}

/* Perkecil beban visual saat pengguna meminta gerak minimal. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t:      0.01ms;
    --t-slow: 0.01ms;
  }
}