/*
 * ============================================================
 * DESIGN SYSTEM — Single Source of Truth
 * Proyek  : Panca (Tribox / BESTRA)
 * Stack   : AdminLTE + Bootstrap 4 + custom CSS
 * Acuan   : Template Gemini (hitam + merah + putih bersih)
 *
 * Cara ganti tema:
 *   Cukup ubah nilai variabel di blok :root di bawah ini.
 *   Seluruh tampilan aplikasi akan menyesuaikan secara otomatis.
 * ============================================================
 */
 
:root {
 
  /* ----------------------------------------------------------
   * BRAND COLORS
   * Palette utama: hitam (primary) + merah (accent)
   * ---------------------------------------------------------- */
  --color-primary:        #000000;   /* sidebar bg, card-header-primary bg */
  --color-primary-light:  #0d0d0d;   /* sidebar hover row bg — tetap hitam */
  --color-primary-text:   #ffffff;   /* teks di atas primary bg */

  --color-accent:         #dc2626;   /* tombol utama, nav aktif, add-new btn */
  --color-accent-hover:   #b91c1c;   /* tombol hover */
  --color-accent-dark:    #991b1b;   /* tombol active/pressed */
  --color-accent-bg:      rgba(220, 38, 38, 0.12); /* latar aktif nav (transparan) */

  /* ----------------------------------------------------------
   * NAVIGATION
   * ---------------------------------------------------------- */
  --color-nav-text:       #9ca3af;   /* teks menu sidebar */
  --color-nav-text-hover: #ffffff;   /* teks menu saat hover */
  --color-nav-hover-bg:   #0d0d0d;   /* bg menu saat hover — tetap hitam */
  --color-nav-active-bg:  #0d0d0d;   /* bg menu aktif — hitam, aksen dari border */
  --color-nav-active-border: #dc2626; /* left-border menu aktif (merah) */

  /* ---------------------------------------------------------- 
   * SEMANTIC COLORS
   * ---------------------------------------------------------- */
  --color-link:           #dc2626;
  --color-link-hover:     #b91c1c;

  --color-success:        #16a34a;
  --color-warning:        #f59e0b;
  --color-danger:         #dc2626;
  --color-info:           #2563eb;

  /* ----------------------------------------------------------
   * NEUTRAL / SURFACE
   * ---------------------------------------------------------- */
  --color-text:           #1f2937;   /* teks utama konten */
  --color-text-muted:     #6b7280;   /* label, placeholder, meta */
  --color-text-light:     #9ca3af;   /* teks sekunder */
  --color-border:         #e5e7eb;   /* border tabel, card */
  --color-border-input:   #d2d2d2;   /* border bawah input */
  --color-bg:             #f3f4f6;   /* background halaman */
  --color-surface:        #ffffff;   /* background card, panel */

  /* ----------------------------------------------------------
   * TYPOGRAPHY
   * Font: Inter (clean, modern — sesuai template Gemini)
   * Fallback: system-ui jika Inter belum load
   * ---------------------------------------------------------- */
  --font-family-base:   'Inter', system-ui, -apple-system, sans-serif;
  --font-size-base:     14px;
  --font-size-sm:       12px;
  --font-size-md:       16px;
  --font-size-lg:       18px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;
  --line-height-base:   1.6;

  /* ----------------------------------------------------------
   * SPACING
   * ---------------------------------------------------------- */
  --spacing-xs:    4px;
  --spacing-sm:    8px;
  --spacing-md:   16px;
  --spacing-lg:   24px;
  --spacing-xl:   32px;
  --spacing-2xl:  48px;

  /* ----------------------------------------------------------
   * BORDER RADIUS
   * ---------------------------------------------------------- */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* ----------------------------------------------------------
   * SHADOWS
   * ---------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* ----------------------------------------------------------
   * TRANSITIONS
   * ---------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* ----------------------------------------------------------
   * Z-INDEX SCALE
   * ---------------------------------------------------------- */
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-modal:     1050;
  --z-tooltip:   1070;
}