:root {
  /* =========================
     Brand
  ========================= */
  --primary-color: #b91c1c;
  --primary-hover-color: #991b1b;
  --primary-dark-color: #7f1d1d;

  /* =========================
     Background
  ========================= */
  --bg-color: #f8fafc;
  --surface-color: #ffffff;

  /* =========================
     Text
  ========================= */
  --text-color: #1f2937;
  --text-muted-color: #6b7280;

  /* =========================
     Border
  ========================= */
  --border-color: #e5e7eb;

  /* =========================
     Status
  ========================= */
  --success-color: #16a34a;
  --warning-color: #ea580c;
  --danger-color: #dc2626;
  --info-color: #2563eb;
  --purple-color: #7c3aed;

  --success-soft-color: rgba(22, 163, 74, 0.1);
  --warning-soft-color: rgba(234, 88, 12, 0.1);
  --danger-soft-color: rgba(220, 38, 38, 0.1);
  --info-soft-color: rgba(37, 99, 235, 0.1);
  --purple-soft-color: rgba(124, 58, 237, 0.1);

  /* =========================
     Sidebar
  ========================= */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 82px;

  --sidebar-bg-start: #991b1b;
  --sidebar-bg-end: #7f1d1d;

  --sidebar-text-color: rgba(255, 255, 255, 0.88);
  --sidebar-text-muted-color: rgba(255, 255, 255, 0.55);

  --sidebar-hover-bg: rgba(255, 255, 255, 0.12);

  --sidebar-active-bg: #ffffff;
  --sidebar-active-text: #991b1b;

  --sidebar-divider-color: rgba(255, 255, 255, 0.12);
  --sidebar-brand-bg: rgba(255, 255, 255, 0.15);

  /* =========================
     Radius
  ========================= */
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;

  /* =========================
     Shadow
  ========================= */
  --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.12);

  /* =========================
     Font
  ========================= */
  --font-family: "TH Sarabun New", sans-serif;
}