/*
 * File Name    : siak-design-tokens.css
 * Description  : Shared design tokens (spacing, semantic accents, Bootstrap bridge) for portal and SIAK shells.
 * Author       : Erwin Youfilandy
 * Date         : 02/05/2026
 * Version      : 1.0.1
 *
 * Revision History :
 * Date        Comments
 * ------------------------------------------------------------------
 * 05/05/2026  Palet utama global diperbarui (5 warna acuan): #61538F #B44074 #F58648 #6DBE4F #0092D5
 * 02/05/2026  Latar sidebar shell: biru gelap selaras portal (--ref-nav-bg)
 * 02/05/2026  Initial release
 *
 * --- Pipeline (Fase 0) ---
 * Tema disalurkan lewat aset statis di public/css/ (tanpa Vite) agar selaras
 * dengan layout yang memuat Bootstrap dari CDN — mudah di-cache dan stabil di shared hosting.
 *
 * --- Peta warna semantik & kontras (WCAG 2.1 AA) ---
 * Aksen di bawah dipakai untuk border kiri / ikon / badge pada latar NETRAL (#fff / #f8f9fa).
 * Teks isi panjang tetap #212529 pada latar putih (kontras > 4.5:1).
 * --siak-accent-info-teks: dipakai jika teks berwarna di atas putih (bukan #0dcaf0 tipis).
 * Verifikasi ulang setelah mengubah token (WebAIM Contrast Checker).
 *
 * --- Performa gambar ---
 * Untuk konten portal dengan <img>, gunakan atribut HTML loading="lazy"
 * dan format WebP/AVIF untuk aset besar (di atas fold: eager + ukuran tetap).
 */

:root {
    /* Brand palette global (acuan tema) */
    --siak-brand-1: #0092d5;
    --siak-brand-2: #b44074;
    --siak-brand-3: #f58648;
    --siak-brand-4: #6dbe4f;
    --siak-brand-5: #0092d5;

    /* Spacing — portal (comfortable) */
    --siak-gap: 1.5rem;
    --siak-gap-sm: 0.75rem;
    /* Admin compact density */
    --siak-gap-compact: 0.65rem;
    --siak-radius: 0.5rem;
    --siak-radius-compact: 0.35rem;

    /* Z-index scale — dekorasi di bawah konten */
    --siak-z-deco: 0;
    --siak-z-surface: 1;
    --siak-z-content: 2;
    --siak-z-sticky: 1020;

    /* Semantic accents (borders / icons) — pair with neutral card background */
    --siak-accent-admin: var(--siak-brand-5);
    --siak-accent-economy: var(--siak-brand-4);
    --siak-accent-emergency: var(--siak-brand-2);
    --siak-accent-public: var(--siak-brand-3);
    --siak-accent-civil: var(--siak-brand-1);

    /* Sidebar (admin / account shell) — selaras portal navbar */
    --siak-sidebar-bg: var(--siak-brand-5);
    --siak-sidebar-width-admin: 220px;
    --siak-sidebar-width-account: 260px;

    /* Portal / shell — focus & radius */
    --portal-focus-ring: 0 0 0 0.2rem rgba(0, 146, 213, 0.28);
    --portal-radius: var(--siak-radius);

    /* Marketing panel (login) — gelap; teks putih di atas gradien */
    --siak-login-gradient-start: var(--siak-brand-5);
    --siak-login-gradient-end: var(--siak-brand-1);
}

/* Bootstrap 5.3 theme bridge — dimuat SETELAH bootstrap.min.css */
:root {
    --bs-primary: var(--siak-brand-5);
    --bs-primary-rgb: 0, 146, 213;
    --bs-secondary: var(--siak-brand-1);
    --bs-secondary-rgb: 0, 146, 213;
    --bs-success: var(--siak-brand-4);
    --bs-success-rgb: 109, 190, 79;
    --bs-danger: var(--siak-brand-2);
    --bs-danger-rgb: 180, 64, 116;
    --bs-warning: var(--siak-brand-3);
    --bs-warning-rgb: 245, 134, 72;
    --bs-info: var(--siak-brand-3);
    --bs-info-rgb: 245, 134, 72;
    --bs-link-color: var(--siak-brand-5);
    --bs-link-hover-color: #0077ad;
}