:root {
  --primary: #1e4a6b;
  --primary-light: #3a6e8f;
  --primary-dark: #0e334b;
  --secondary: #d97c2b;
  --secondary-light: #e89f5c;
  --secondary-dark: #b35f1a;
  --success: #2c7a5a;
  --warning: #e6a917;
  --error: #c95a5a;

  --background: #f5f8fc;
  --background-light: #ffffff;
  --surface: #ffffff;
  --surface-dark: #eef2f7;
  --surface-darker: #e2e8f0;

  --border: #d0dceb;
  --border-light: #e2ebf5;
  --border-dark: #b8c9dd;

  --text-primary: #1a2b3c;
  --text-secondary: #3a4b5e;
  --text-muted: #6b7f94;
  --text-inverse: #ffffff;

  --error-light: #fbe9e9;
  --success-light: #e6f4ef;

  --primary-gradient: linear-gradient(135deg, var(--primary), #154b6b);
  --secondary-gradient: linear-gradient(135deg, var(--secondary), #c4681a);
  --success-gradient: linear-gradient(135deg, var(--success), #1e6245);
  --overlay: rgba(0, 0, 0, 0.5);

  --radius: 10px;
  --radius-circle: 9999px;
  --transition: 0.3s ease;
  --shadow:
    0 4px 12px -4px rgba(0, 20, 40, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:
    0 20px 25px -10px rgba(0, 30, 60, 0.2), 0 8px 12px -8px rgba(0, 0, 0, 0.1);
}
/* ========== Utility Classes ========== */
.bg-background {
  background-color: var(--background);
}
.bg-surface {
  background-color: var(--surface);
}
.bg-surface-dark {
  background-color: var(--surface-dark);
}
.bg-surface-darker {
  background-color: var(--surface-darker);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-primary-light {
  background-color: var(--primary-light);
}
.bg-primary-dark {
  background-color: var(--primary-dark);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-secondary-light {
  background-color: var(--secondary-light);
}
.bg-error {
  background-color: var(--error);
}
.bg-error-light {
  background-color: var(--error-light);
}
.bg-success-light {
  background-color: var(--success-light);
}

.bg-success {
  background-color: var(--success);
}

.bg-overlay {
  background-color: var(--overlay);
}
.bg-primary-gradient {
  background: var(--primary-gradient);
}
.bg-secondary-gradient {
  background: var(--secondary-gradient);
}

.text-primary {
  color: var(--text-primary);
}
.text-secondary {
  color: var(--text-secondary);
}
.text-muted {
  color: var(--text-muted);
}
.text-inverse {
  color: var(--text-inverse);
}
.text-error {
  color: var(--error);
}
.text-success {
  color: var(--success);
}

.border-border {
  border-color: var(--border);
}
.border-border-light {
  border-color: var(--border-light);
}
.border-border-dark {
  border-color: var(--border-dark);
}

.rounded-custom {
  border-radius: var(--radius);
}
.rounded-circle {
  border-radius: var(--radius-circle);
}

.shadow-default {
  box-shadow: var(--shadow);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.placeholder-muted::placeholder {
  color: var(--text-muted);
}