:root {
  /* Base Colors */
  --color-bg: #ffffff;
  --color-message-bg: #f9fafb;
  --color-text: #111827;
  --color-text-reversed: #ffffff;
  --color-link: #6366f1;
  --color-border: #e5e7eb;
  --color-border-dark: #d1d5db;
  --color-border-darker: #9ca3af;
  --color-border-subtle: rgba(0, 0, 0, 0.05);

  /* Interaction Variables */
  --hover-color: var(--color-border-darker);
  --hover-size: 0.056em;
  --hover-filter: brightness(1);

  /* Shadows */
  --shadow-standard: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-button-hover: 0 4px 10px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-button-active: 0 2px 6px rgba(17, 24, 39, 0.10), 0 1px 2px rgba(17, 24, 39, 0.08);
  --shadow-focus: 0 0 0 3px rgba(80, 107, 255, 0.35);
  --shadow-focus-primary: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
  --shadow-table: 0 -1px 4px 0 rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

  /* Primary/Secondary Colors */
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-primary-darker: #4338ca;
  --color-secondary-bg: #eff6ff;
  --color-secondary-text: #1e40af;
  --color-secondary-border: #bfdbfe;
  --color-secondary-hover-bg: #dbeafe;
  --color-secondary-hover-border: #93c5fd;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-success: #16a34a;
  --color-success-hover: #15803d;
  --color-success-bg: #dcfce7;
  --color-success-text: #166534;
  --color-danger-bg: #fee2e2;
  --color-danger-text: #991b1b;
  --color-warning: #eab308;
  --color-warning-hover: #ca8a04;
  --color-warning-bg: #fef9c3;
  --color-warning-text: #854d0e;
  --color-info-bg: #dbeafe;
  --color-info-text: #1e40af;
  --color-neutral-bg: #f3f4f6;
  --color-neutral-text: #374151;
  --text-muted: #6b7280;
  --color-orange: #ea580c;
  --color-orange-hover: #c2410c;
  --color-orange-cobranzo: oklch(0.70 0.15 50);
  --color-orange-cobranzo-hover: oklch(0.65 0.15 50);
  --color-orange-cobranzo-active: oklch(0.60 0.15 50);
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #fff7ed;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #cad3e0;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-900: #111827;
  --transition-fast: 200ms;
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-image: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-focus-orange: 0 0 0 2px rgba(234, 88, 12, 0.5);

  --color-shadow-black: 22.5% 0.01 264;
}

.primary {
  background-color: var(--color-primary);
  color: white;
}

.primary:hover {
  background-color: var(--color-primary-hover);
}

.secondary {
  background-color: var(--color-secondary-bg);
  color: var(--color-secondary-text);
  border: 1px solid var(--color-secondary-border);
}

.secondary:hover {
  background-color: var(--color-secondary-hover-bg);
  border-color: var(--color-secondary-hover-border);
}

.danger {
  background-color: var(--color-danger);
  color: white;
}

.danger:hover {
  background-color: var(--color-danger-hover);
}

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

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

/* Form badge colors */
.bg-amber {
  background: radial-gradient(circle at 30% 30%, oklch(0.65 0.15 70), oklch(0.55 0.15 70));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bg-purple {
  background: radial-gradient(circle at 30% 30%, oklch(0.60 0.20 275), oklch(0.52 0.20 275));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bg-green {
  background: radial-gradient(circle at 30% 30%, oklch(0.65 0.12 150), oklch(0.55 0.12 150));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bg-blue {
  background: radial-gradient(circle at 30% 30%, oklch(0.60 0.15 200), oklch(0.50 0.15 200));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bg-orange {
  background: radial-gradient(circle at 30% 30%, oklch(0.65 0.18 30), oklch(0.55 0.18 30));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}