:root {
  /* Neutral Colors */
  --neutral-900: #212121;
  --neutral-800: #4D4D4D;
  --neutral-700: #717171;
  --neutral-600: #89939E;
  --neutral-500: #ABBED1;
  --neutral-400: #E5F7FA;
  --neutral-300: #F5F7FA;
  --neutral-100: #FFFFFF;

  /* Primary Colors (Orange) */
  --primary-700: #0053AD;
  --primary-600: #0663C7;
  --primary-500: #0671E0;
  --primary-400: #4196F0;
  --primary-300: #DBEDFF;
  --primary-200: #EEF5FC;
  --primary-100: #EEF5FC;

  /* Secondary Colors (Blue) */
  --secondary-700: #0053AD;
  --secondary-600: #0671E0;
  --secondary-500: #0663C7;
  --secondary-400: #4196F0;
  --secondary-300: #DBEDFF;
  --secondary-200: #EEF5FC;
  --secondary-100: #0053AD;

  /* Success Colors (Green) */
  --success-700: #1B6E53;
  --success-600: #009262;
  --success-500: #115B43;
  --success-400: #32C997;
  --success-300: #84DFC1;
  --success-200: #F1FBF8;

  /* Danger Colors (Red) */
  --danger-700: #E01507;
  --danger-600: #E02B1D;
  --danger-500: #C33025;
  --danger-400: #FF5A4F;
  --danger-300: #F0857D;
  --danger-200: #FFF1F0;
}

/* Utility Classes untuk Background */
.bg-neutral-900 { background-color: var(--neutral-900); }
.bg-neutral-800 { background-color: var(--neutral-800); }
.bg-neutral-700 { background-color: var(--neutral-700); }
.bg-neutral-600 { background-color: var(--neutral-600); }
.bg-neutral-500 { background-color: var(--neutral-500); }
.bg-neutral-400 { background-color: var(--neutral-400); }
.bg-neutral-300 { background-color: var(--neutral-300); }
.bg-neutral-100 { background-color: var(--neutral-100); }

.bg-primary-700 { background-color: var(--primary-700); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-100 { background-color: var(--primary-100); }

.bg-secondary-700 { background-color: var(--secondary-700); }
.bg-secondary-600 { background-color: var(--secondary-600); }
.bg-secondary-500 { background-color: var(--secondary-500); }
.bg-secondary-400 { background-color: var(--secondary-400); }
.bg-secondary-300 { background-color: var(--secondary-300); }
.bg-secondary-200 { background-color: var(--secondary-200); }

.bg-success-700 { background-color: var(--success-700); }
.bg-success-600 { background-color: var(--success-600); }
.bg-success-500 { background-color: var(--success-500); }
.bg-success-400 { background-color: var(--success-400); }
.bg-success-300 { background-color: var(--success-300); }
.bg-success-200 { background-color: var(--success-200); }

.bg-danger-700 { background-color: var(--danger-700); }
.bg-danger-600 { background-color: var(--danger-600); }
.bg-danger-500 { background-color: var(--danger-500); }
.bg-danger-400 { background-color: var(--danger-400); }
.bg-danger-300 { background-color: var(--danger-300); }
.bg-danger-200 { background-color: var(--danger-200); }

/* Utility Classes untuk Text Color */
.text-neutral-900 { color: var(--neutral-900); }
.text-neutral-800 { color: var(--neutral-800); }
.text-neutral-700 { color: var(--neutral-700); }
.text-neutral-600 { color: var(--neutral-600); }
.text-neutral-500 { color: var(--neutral-500); }
.text-neutral-100 { color: var(--neutral-100); }

.text-primary-700 { color: var(--primary-700); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-400 { color: var(--primary-400); }

.text-secondary-700 { color: var(--secondary-700); }
.text-secondary-600 { color: var(--secondary-600); }
.text-secondary-500 { color: var(--secondary-500); }

.text-success-700 { color: var(--success-700); }
.text-success-600 { color: var(--success-600); }
.text-success-500 { color: var(--success-500); }

.text-danger-700 { color: var(--danger-700); }
.text-danger-600 { color: var(--danger-600); }
.text-danger-500 { color: var(--danger-500); }

/* Utility Classes untuk Border */
.border-primary-500 { border-color: var(--primary-500); }
.border-secondary-500 { border-color: var(--secondary-500); }
.border-success-500 { border-color: var(--success-500); }
.border-danger-500 { border-color: var(--danger-500); }
.border-neutral-500 { border-color: var(--neutral-500); }