/* Theme variables */
:root {
  /* Light mode colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-bg-tertiary: #f3f4f6;
  --color-bg-hover: #f9fafb;
  --color-bg-disabled: #f9fafb;
  
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-disabled: #9ca3af;
  
  --color-border: #e5e7eb;
  --color-border-hover: #d1d5db;
  --color-border-focus: #3b82f6;
  
  /* Special colors */
  --color-blue-bg: #eff6ff;
  --color-blue-border: #93c5fd;
}

.dark {
  /* Dark mode colors */
  --color-bg-primary: #1f2937;
  --color-bg-secondary: #111827;
  --color-bg-tertiary: #374151;
  --color-bg-hover: #374151;
  --color-bg-disabled: #111827;
  
  --color-text-primary: #f9fafb;
  --color-text-secondary: #d1d5db;
  --color-text-muted: #9ca3af;
  --color-text-disabled: #6b7280;
  
  --color-border: #4b5563;
  --color-border-hover: #6b7280;
  --color-border-focus: #3b82f6;
  
  /* Special colors */
  --color-blue-bg: #1e3a8a;
  --color-blue-border: #3b82f6;
}

/* Utility classes using CSS variables */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary { background-color: var(--color-bg-tertiary); }
.bg-hover { background-color: var(--color-bg-hover); }
.bg-disabled { background-color: var(--color-bg-disabled); }

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-disabled { color: var(--color-text-disabled); }

.border-default { border-color: var(--color-border); }
.border-hover { border-color: var(--color-border-hover); }
.border-focus { border-color: var(--color-border-focus); }

/* Special backgrounds */
.bg-blue-light { background-color: var(--color-blue-bg); }
.border-blue { border-color: var(--color-blue-border); }

/* Card styles */
.card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}

.card-secondary {
  background-color: var(--color-bg-secondary);
  border-radius: 0.5rem;
}

/* Interactive styles */
.hover-bg:hover { background-color: var(--color-bg-hover); }

/* Typography */
.heading-lg {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.heading-md {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.heading-sm {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-text-primary);
}