/* ══════════════════════════════════════════════
   ARABIC QUANTUM — Design Tokens (sumber tunggal)
   Dipisah dari layout.css supaya halaman publik/embed
   (form, render, instruksi order) bisa memakai token yang
   sama TANPA menarik seluruh CSS layout/sidebar/tabel.
   Wajib dimuat SEBELUM layout.css di setiap halaman.
   ══════════════════════════════════════════════ */

:root {
  --bg:           #f4f5f7;
  --surface:      #ffffff;
  --surface-alt:  #f9fafb;
  --border:       #e1e3e5;
  --text:         #1a1a1a;
  --text-muted:   #6d7175;
  /* Dinaikkan dari #8c9196 (~2.6:1) ke #6b7280 (~4.6:1 di atas putih) supaya info
     sekunder yang penting (no. WA, tanggal, subteks) memenuhi kontras minimum
     WCAG AA (4.5:1) untuk teks normal — token ini sebelumnya terlalu terang. */
  --text-faint:   #6b7280;
  --shadow:       rgba(0,0,0,0.06);
  --input-bg:     #ffffff;
  --table-head:   #f9fafb;
  --hover:        #f6f6f7;

  /* Skala radius baku — pakai salah satu dari ini, jangan angka bebas */
  --radius-sm:   8px;   /* button kecil (8–10), badge/tag kecil, tooltip, kode inline */
  --radius-md:  12px;   /* input/select/textarea (10–12), icon button (10–14), button besar/CTA (12–16), thumbnail (12–16), notice/alert kecil */
  --radius-lg:  16px;   /* card & panel (16–20), thumbnail/image card besar */
  --radius-xl:  20px;   /* modal, kartu kaca, container besar (20–24) */
  --radius-2xl: 24px;   /* bottom sheet (sudut atas), modal/container paling besar */
  --radius-pill: 999px; /* pill, chip, badge pill, dot, avatar bulat (pengganti 50%) */

  /* Skala elevasi (shadow) baku — 3 tingkat */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);   /* card, dropdown kecil */
  --shadow-md: 0 8px 24px rgba(0,0,0,0.12);  /* popover, sidebar mobile */
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.2);  /* modal */
  --backdrop:  rgba(15,23,20,0.38);          /* peredup latar di belakang modal & sheet */

  /* Skala tipografi baku — 9 langkah, dipakai lewat var() bukan angka bebas.
     Sebelumnya sistem punya 50+ nilai font-size berbeda (0.65rem s/d 1.4rem)
     yang cuma beda tipis satu sama lain tanpa pola — skala ini jadi target
     migrasi bertahap per halaman (lihat admin/*.php, admin/order/*.php). */
  --text-2xs:  0.68rem; /* meta/badge terkecil (mis. label counter kecil) */
  --text-xs:   0.75rem; /* label uppercase, meta kecil, caption tabel */
  --text-sm:   0.8rem;  /* subtitle, form label, tombol kecil */
  --text-base: 0.875rem; /* body/table/form default */
  --text-md:   0.95rem;  /* body sedikit lebih besar (product title, dll) */
  --text-lg:   1.05rem;  /* sub-heading kecil (section title dalam card) */
  --text-xl:   1.25rem;  /* page title */
  --text-2xl:  1.75rem;  /* stat besar / angka hero sedang */
  --text-3xl:  3rem;     /* angka hero paling besar (mis. dashboard analitik) */

  /* Warna semantik — dipakai utk teks/aksen status (info/warning/danger/netral)
     di admin/order/produk.php & admin/dasbor.php. Sebelumnya ditulis manual (#hex)
     langsung di tiap tempat sehingga tidak ikut menyesuaikan saat dark mode aktif. */
  --color-info:             #1a3d8f; /* biru — angka/label informasi netral (konversi, repeat buyer, dll) */
  --color-warning:          #7d5a00; /* amber tua — teks status draft/pending/perlu perhatian */
  --color-warning-accent:   #f59e0b; /* amber terang — aksen/border-left (mis. kartu produk draft) */
  --color-warning-bg:       #fff8e6; /* latar box peringatan (mis. notice edit skema harga) */
  --color-warning-border:   #f0d98c;
  --color-danger:           #d72c0d; /* merah — teks bahaya/gagal/refund, senada dgn .alert-danger */
  --color-danger-bg:        #fdecea; /* latar badge bahaya (mis. "Funnel terhapus") */
  --color-danger-text:      #b42318;
  --color-neutral:          #9ca3af; /* abu-abu — status netral/nonaktif/kedaluwarsa */
  --color-accent-purple:      #5b21b6; /* ungu — badge tautan funnel */
  --color-accent-purple-bg:   #ede9fe;

  --color-success:            #1a7340; /* hijau — badge/teks status sukses (mis. tautan aman, step checkout) */
  --color-success-bg:         #d4edda;
  --color-danger-strong:      #ef4444; /* merah lebih terang — hover ikon hapus/aksi bahaya */
  --color-warning-badge-bg:   #fef3c7; /* pasangan badge amber (beda konteks dgn --color-warning-bg) */
  --color-warning-badge-text: #92400e;
  --color-info-badge-bg:      #dbeafe; /* pasangan badge biru (beda konteks dgn --color-info) */
  --color-info-badge-text:    #1e40af;
  --color-accent-violet:      #7c3aed; /* ungu terang — aksen tipe "Landing Page"/"Builder" */
  --color-brand-tint-bg:      #f0faf6; /* latar lembut bertema brand (state aktif/selected) */
  --color-brand-tint-border:  #95c9b4;
  --color-track-bg:           #eceef0; /* latar track progress/drop-off bar */

  /* Status "lembut" & solid — dipakai .alert-*, .btn-danger, tombol logout, toast error */
  --color-on-solid:           #fff;    /* teks/ikon di atas latar solid (brand, danger, info) — sama di terang & gelap */
  --color-info-solid:         #2563eb; /* latar solid info (toast informasi) */
  --color-danger-solid:       #d72c0d; /* latar solid (toast error, dot) — teks putih di atasnya, sama di terang & gelap */
  --color-danger-soft:        #ff6b5a; /* teks/ikon bahaya pada tombol outline */
  --color-danger-soft-bg:     #fff4f2;
  --color-danger-soft-border: #ffc9c2;
  --color-info-soft-bg:       #f0f4ff;
  --color-info-soft-border:   #b3c3f7;
  --color-warning-dot:        #fbbf24; /* titik status draft */
  --color-accent-indigo:      #4338ca; /* badge jenis "Form" / tipe field */
  --color-accent-indigo-bg:   #eef2ff;
  --color-accent-fuchsia:     #a21caf; /* badge jenis "Survei" / penanda wajib */
  --color-accent-fuchsia-bg:  #fdf4ff;
  --scrollbar-thumb:          #d1d5db;
  --scrollbar-thumb-hover:    #9ca3af;

  /* Ditambahkan saat merapikan warna kembar — satu makna, satu token */
  --color-success-solid:      #1a9d5c; /* latar solid sukses (titik status, tombol tersalin) — teks putih di atasnya */
  --color-whatsapp:           #25d366; /* hijau resmi WhatsApp — tombol/ikon kirim WA */
  --border-strong:            #c9cccf; /* garis/titik abu lebih tegas dari --border */
  --color-neutral-bg:         #f1f2f3; /* latar badge netral/nonaktif (pasangan --text-faint) */
  --color-on-warning:         #1a1a1a; /* teks di atas latar solid amber — tetap gelap di terang & gelap */
  --color-gray-solid:         #4b5563; /* latar solid badge abu-abu — teks putih di atasnya */

  /* Ring fokus field — satu sumber utk semua input (lebar 3px normal, 4px utk field kaca) */
  --focus-ring-color: rgba(var(--brand-rgb, 0,128,96), 0.12);
  --focus-ring:       0 0 0 3px var(--focus-ring-color);
  --focus-ring-lg:    0 0 0 4px var(--focus-ring-color);
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
}

[data-theme="dark"] {
  color-scheme: dark; /* supaya elemen native browser (checkbox, radio, select, scrollbar)
                          otomatis pakai varian gelap — tanpa ini checkbox tetap putih
                          walau seluruh CSS lain sudah gelap */
  --bg:           #15161a;
  --surface:      #1e1f24;
  --surface-alt:  #25262c;
  --border:       #34353c;
  --text:         #f0f0f2;
  --text-muted:   #a3a4ab;
  /* Sama seperti versi terang: dinaikkan dari #7a7b82 supaya kontras vs
     latar gelap (#1e1f24) memenuhi ambang WCAG AA. */
  --text-faint:   #9497a1;
  --shadow:       rgba(0,0,0,0.4);
  --input-bg:     #25262c;
  --table-head:   #25262c;
  --hover:        #2a2b31;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
  --backdrop:  rgba(0,0,0,0.5);

  --color-info:             #8fa8e8;
  --color-warning:          #fcd34d;
  --color-warning-accent:   #fbbf24;
  --color-warning-bg:       rgba(146,64,14,0.18);
  --color-warning-border:   rgba(252,211,77,0.35);
  --color-danger:           #ff8a75;
  --color-danger-bg:        rgba(180,35,24,0.18);
  --color-danger-text:      #ff8a75;
  --color-neutral:          #9ca3af;
  --color-accent-purple:      #c4b5fd;
  --color-accent-purple-bg:   rgba(91,33,182,0.2);

  --color-success:            #6ee7b7;
  --color-success-bg:         rgba(26,115,64,0.18);
  --color-danger-strong:      #f87171;
  --color-warning-badge-bg:   rgba(146,64,14,0.18);
  --color-warning-badge-text: #fcd34d;
  --color-info-badge-bg:      rgba(29,64,175,0.2);
  --color-info-badge-text:    #93c5fd;
  --color-accent-violet:      #a78bfa;
  --color-brand-tint-bg:      rgba(0,128,96,0.12);
  --color-brand-tint-border:  rgba(149,201,180,0.3);
  --color-track-bg:           rgba(255,255,255,0.08);

  --color-danger-solid:       #d72c0d;
  --color-danger-soft:        #ff6b5a;
  --color-danger-soft-bg:     rgba(255,107,90,0.15);
  --color-danger-soft-border: rgba(255,138,117,0.35);
  --color-info-soft-bg:       rgba(143,168,232,0.12);
  --color-info-soft-border:   rgba(143,168,232,0.35);
  --color-warning-dot:        #fbbf24;
  --color-accent-indigo:      #b4b9fb;
  --color-accent-indigo-bg:   rgba(99,102,241,0.2);
  --color-accent-fuchsia:     #f0abfc;
  --color-accent-fuchsia-bg:  rgba(217,70,239,0.2);
  --scrollbar-thumb:          rgba(255,255,255,0.18);
  --scrollbar-thumb-hover:    rgba(255,255,255,0.30);
  --color-success-solid:      #1a9d5c;
  --color-whatsapp:           #25d366;
  --border-strong:            #4a4b53;
  --color-neutral-bg:         rgba(255,255,255,0.08);
  --color-on-warning:         #1a1a1a;
  --color-gray-solid:         #4b5563;
}