/* Variabel warna tema (--brand-*) buat frontend publik/pemohon -- dipakai lewat class Tailwind
   arbitrary-value (mis. bg-[var(--brand-600)]) di semua halaman public/*.html (kecuali admin/).
   Preset aktif ditentukan lewat atribut data-theme di <html>, di-set oleh public/js/theme.js
   berdasarkan m_pengaturan_aplikasi.warna_tema / m_lembaga.warna_tema (lihat routes/pengaturan.js
   GET /api/pengaturan/publik). Default (:root, tanpa data-theme) = sky.
   Daftar slug valid ada di utils/themePresets.js -- WAJIB disinkron kalau nambah/hapus preset di sini. */

:root, [data-theme="sky"] {
    --brand-50: #f0f9ff;
    --brand-100: #e0f2fe;
    --brand-200: #bae6fd;
    --brand-300: #7dd3fc;
    --brand-400: #38bdf8;
    --brand-500: #0ea5e9;
    --brand-600: #0284c7;
    --brand-700: #0369a1;
    --brand-800: #075985;
    --brand-900: #0c4a6e;
    --brand-950: #082f49;
}

[data-theme="indigo"] {
    --brand-50: #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-300: #a5b4fc;
    --brand-400: #818cf8;
    --brand-500: #6366f1;
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
    --brand-800: #3730a3;
    --brand-900: #312e81;
    --brand-950: #1e1b4b;
}

[data-theme="blue"] {
    --brand-50: #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --brand-800: #1e40af;
    --brand-900: #1e3a8a;
    --brand-950: #172554;
}

[data-theme="emerald"] {
    --brand-50: #ecfdf5;
    --brand-100: #d1fae5;
    --brand-200: #a7f3d0;
    --brand-300: #6ee7b7;
    --brand-400: #34d399;
    --brand-500: #10b981;
    --brand-600: #059669;
    --brand-700: #047857;
    --brand-800: #065f46;
    --brand-900: #064e3b;
    --brand-950: #022c22;
}

[data-theme="rose"] {
    --brand-50: #fff1f2;
    --brand-100: #ffe4e6;
    --brand-200: #fecdd3;
    --brand-300: #fda4af;
    --brand-400: #fb7185;
    --brand-500: #f43f5e;
    --brand-600: #e11d48;
    --brand-700: #be123c;
    --brand-800: #9f1239;
    --brand-900: #881337;
    --brand-950: #4c0519;
}

[data-theme="amber"] {
    --brand-50: #fffbeb;
    --brand-100: #fef3c7;
    --brand-200: #fde68a;
    --brand-300: #fcd34d;
    --brand-400: #fbbf24;
    --brand-500: #f59e0b;
    --brand-600: #d97706;
    --brand-700: #b45309;
    --brand-800: #92400e;
    --brand-900: #78350f;
    --brand-950: #451a03;
}

[data-theme="violet"] {
    --brand-50: #f5f3ff;
    --brand-100: #ede9fe;
    --brand-200: #ddd6fe;
    --brand-300: #c4b5fd;
    --brand-400: #a78bfa;
    --brand-500: #8b5cf6;
    --brand-600: #7c3aed;
    --brand-700: #6d28d9;
    --brand-800: #5b21b6;
    --brand-900: #4c1d95;
    --brand-950: #2e1065;
}

[data-theme="cyan"] {
    --brand-50: #ebfcff;
    --brand-100: #d2f7fe;
    --brand-200: #abf0fc;
    --brand-300: #6ee3f7;
    --brand-400: #2cd8f6;
    --brand-500: #00d0f5;
    --brand-600: #00b7d7;
    --brand-700: #0093ad;
    --brand-800: #00758a;
    --brand-900: #035968;
    --brand-950: #03363f;
}

[data-theme="navy"] {
    --brand-50: #eef3fb;
    --brand-100: #d9e3f4;
    --brand-200: #b6c8ea;
    --brand-300: #87a3d8;
    --brand-400: #5479be;
    --brand-500: #33599f;
    --brand-600: #1f4283;
    --brand-700: #19356b;
    --brand-800: #152c58;
    --brand-900: #12244a;
    --brand-950: #0b1730;
}

p.form-error-msg {
    margin-top: -12px;
    font-size: 9px;
    margin-bottom: 7px;
}

/* Efek pindah halaman (View Transitions lintas dokumen): aplikasi ini multi-page (bukan SPA), jadi
   tanpa ini tiap klik menu kelihatan kedip putih. Browser yang mendukung (Chrome/Edge 126+, Safari 18.2+)
   otomatis cross-fade halaman lama -> baru; browser lain (mis. Firefox) tetap pindah biasa tanpa efek.
   Sidebar & topbar admin diberi nama transisi sendiri supaya diam di tempat -- cuma isi halaman yang
   memudar, terasa seperti aplikasi SPA. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: ease-out;
}

#admin-sidebar { view-transition-name: admin-sidebar; }
#admin-topbar { view-transition-name: admin-topbar; }

::view-transition-group(admin-sidebar),
::view-transition-group(admin-topbar) {
    animation-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}