:root {
  --bg: #f2fff5;
  --bg-sidebar: #ffffff;
  --bg-header: #fdfffd;
  --sidebar-active: #6bb943;
  --sidebar-hover: #94dc70;
  --sidebar-focus: #dfffce;
  --sidebar-color-focus: #3c7320;
  --sidebar-color-hover: #3c7320;
  --border-color: #ddd;

  --border: #e0e0e0;
  --color: #333;
  --color-sub: #5b5b5b;
  --color-item-sidebar: #787878;
  --pastel-biru: #b3d4fc;
  --border-pastel-biru: #9bbfe8;
  --bg-disabled: #f2f2f2;
  --color-disabled: #999;
  --border-disabled: #ddd;

  /* Status color */
  --primary: #4a90e2;
  --secondary: #95a5a6;
  --success: #26a059;
  --danger: #e74c3c;
  --warning: #f1c40f;
  --info: #cf58d1;
  --light: #f8f9fa;
  --dark: #212529;

  /* Derived */
  --color-dark: #1f1f1f;
  --bg-disabled: #fcfcfc;
  --color-disabled: #cccccc;
  --border-disabled: #f0f0f0;

  /* File colors */
  --word-color: #2b579a;
  --excel-color: #217346;
  --pdf-color: #d32f2f;
  --img-color: #ff9800;

  /* Pastel Biru */
  --pastel-biru: #deefff;
  --color-pastel-biru: #334456;
  --border-pastel-biru: #c9dcef;

  /* Pastel Hijau */
  --pastel-hijau: #d3ebd3;
  --color-pastel-hijau: #2f392f;
  --border-pastel-hijau: #bee1be;

  /* Pastel Merah */
  --pastel-merah: #fabebe;
  --color-pastel-merah: #870e0e;
  --border-pastel-merah: #ebacac;

  /* Pastel Kuning */
  --pastel-kuning: #ffea9e;
  --color-pastel-kuning: #4a4a2a;
  --border-pastel-kuning: #ffe27a;

  /* Pastel Ungu */
  --pastel-ungu: #e6e0ff;
  --color-pastel-ungu: #53477e;
  --border-pastel-ungu: #d5cafa;

  /* Pastel Orange */
  --pastel-orange: rgb(255, 222, 190);
  --color-pastel-orange: rgb(133, 105, 77);
  --border-pastel-orange: rgb(255, 222, 190);

  --color-start: #19e3d5;
  --color-mid: #d33deb;
  --color-end: #f00e43;
  --bg-loading: rgba(0, 0, 0, 0.9);
  --color-spinner: #2f436f;
  --bg-spinner: #ffe44c;
}
/* ==========================
   PASTEL BUTTON BASE
========================== */
[class^="btn-pastel-"] {
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
  --bs-btn-active-color: inherit;

  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-btn-bg) 88%, #000);
  --bs-btn-hover-border-color: color-mix(
    in srgb,
    var(--bs-btn-border-color) 88%,
    #000
  );

  --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-bg) 80%, #000);
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--bs-btn-border-color) 80%,
    #000
  );
}

/* ==========================
   BASE BUTTON
========================== */
.btn {
  --bs-btn-disabled-color: #999;
  --bs-btn-disabled-bg: var(--bg-disabled);
  --bs-btn-disabled-border-color: var(--border-disabled);
}

/* ==========================
   PRIMARY
========================== */
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
}

/* ==========================
   SECONDARY
========================== */
.btn-secondary {
  --bs-btn-bg: var(--secondary);
  --bs-btn-border-color: var(--secondary);
}

/* ==========================
   SUCCESS
========================== */
.btn-success {
  --bs-btn-bg: var(--success);
  --bs-btn-border-color: var(--success);
}

/* ==========================
   DANGER
========================== */
.btn-danger {
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
}

/* ==========================
   WARNING
========================== */
.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--warning);
  --bs-btn-border-color: var(--warning);
}

/* ==========================
   INFO
========================== */
.btn-info {
  --bs-btn-bg: var(--info);
  --bs-btn-border-color: var(--info);
}

/* ==========================
   LIGHT
========================== */
.btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--light);
  --bs-btn-border-color: var(--border);
}

/* ==========================
   DARK
========================== */
.btn-dark {
  --bs-btn-bg: var(--dark);
  --bs-btn-border-color: var(--dark);
}

/* ==========================
   OUTLINE BUTTONS
========================== */
.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-color: #fff;
}

.btn-outline-secondary {
  --bs-btn-color: var(--secondary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-hover-bg: var(--secondary);
  --bs-btn-hover-color: #fff;
}

.btn-outline-success {
  --bs-btn-color: var(--success);
  --bs-btn-border-color: var(--success);
  --bs-btn-hover-bg: var(--success);
  --bs-btn-hover-color: #fff;
}

.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-color: #fff;
}

.btn-outline-warning {
  --bs-btn-color: var(--warning);
  --bs-btn-border-color: var(--warning);
  --bs-btn-hover-bg: var(--warning);
  --bs-btn-hover-color: #000;
}

.btn-outline-info {
  --bs-btn-color: var(--info);
  --bs-btn-border-color: var(--info);
  --bs-btn-hover-bg: var(--info);
  --bs-btn-hover-color: #fff;
}

/* ==========================
   PASTEL BUTTONS (BONUS)
========================== */
.btn-pastel-biru {
  --bs-btn-color: var(--color-pastel-biru);
  --bs-btn-bg: var(--pastel-biru);
  --bs-btn-border-color: var(--border-pastel-biru);
}

.btn-pastel-hijau {
  --bs-btn-color: var(--color-pastel-hijau);
  --bs-btn-bg: var(--pastel-hijau);
  --bs-btn-border-color: var(--border-pastel-hijau);
}

.btn-pastel-merah {
  --bs-btn-color: var(--color-pastel-merah);
  --bs-btn-bg: var(--pastel-merah);
  --bs-btn-border-color: var(--border-pastel-merah);
}
.btn-pastel-kuning {
  --bs-btn-color: var(--color-pastel-kuning);
  --bs-btn-bg: var(--pastel-kuning);
  --bs-btn-border-color: var(--border-pastel-kuning);
}
.btn-pastel-ungu {
  --bs-btn-color: var(--color-pastel-ungu);
  --bs-btn-bg: var(--pastel-ungu);
  --bs-btn-border-color: var(--border-pastel-ungu);
}
.btn-pastel-orange {
  --bs-btn-color: var(--color-pastel-orange);
  --bs-btn-bg: var(--pastel-orange);
  --bs-btn-border-color: var(--border-pastel-orange);
}

.btn-pastel-biru:hover {
  background-color: color-mix(in srgb, var(--pastel-biru) 80%, #fff);
  border-color: color-mix(in srgb, var(--border-pastel-biru) 80%, #fff);
  color: var(--color-pastel-biru);
}

.btn-pastel-hijau:hover {
  background-color: color-mix(in srgb, var(--pastel-hijau) 80%, #fff);
  border-color: color-mix(in srgb, var(--border-pastel-hijau) 80%, #fff);
  color: var(--color-pastel-hijau);
}

.btn-pastel-merah:hover {
  background-color: color-mix(in srgb, var(--pastel-merah) 80%, #fff);
  border-color: color-mix(in srgb, var(--border-pastel-merah) 80%, #fff);
  color: var(--color-pastel-merah);
}

.btn-pastel-kuning:hover {
  background-color: color-mix(in srgb, var(--pastel-kuning) 80%, #fff);
  border-color: color-mix(in srgb, var(--border-pastel-kuning) 80%, #fff);
  color: var(--color-pastel-kuning);
}

.btn-pastel-ungu:hover {
  background-color: color-mix(in srgb, var(--pastel-ungu) 80%, #fff);
  border-color: color-mix(in srgb, var(--border-pastel-ungu) 80%, #fff);
  color: var(--color-pastel-ungu);
}

.btn-pastel-orange:hover {
  background-color: color-mix(in srgb, var(--pastel-orange) 80%, #fff);
  border-color: color-mix(in srgb, var(--border-pastel-orange) 80%, #fff);
  color: var(--color-pastel-orange);
}