:root {
  /* Primary — bisa di-override inline jika site punya brand color */
  --color-primary:       #2563EB;
  --color-primary-dark:  #1D4ED8;
  --color-primary-light: #DBEAFE;

  /* Netral */
  --color-bg:      #F8F9FA;
  --color-surface: #FFFFFF;
  --color-border:  #E5E7EB;
  --color-text:    #111827;
  --color-muted:   #6B7280;

  /* Status */
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger:  #DC2626;
  --color-info:    #0891B2;

  /* Elevation */
  --shadow-card: 0 4px 20px rgba(0,0,0,.08);
  --shadow-nav:  0 2px 8px rgba(0,0,0,.10);

  /* Shape */
  --radius-card:  16px;
  --radius-btn:   10px;
  --radius-input: 10px;

  /* Layout */
  --bottom-nav-height: 64px;
  --navbar-height:     56px;
}

/* Terapkan warna primary ke BS5 override */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.text-primary { color: var(--color-primary) !important; }
.bg-primary   { background-color: var(--color-primary) !important; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }