:root {
  /* Primary Colors */
  --primary-50: #f0f7ff;
  --primary-100: #e0eefe;
  --primary-200: #bae0fd;
  --primary-300: #7cc8fb;
  --primary-400: #37a7f1;
  --primary-500: #1a8fdf;
  --primary-600: #0b72be;
  --primary-700: #0a5b9a;
  --primary-800: #0c4b7d;
  --primary-900: #0f3e68;

  /* Warm Accent Colors - for nurturing, friendly feel */
  --accent-50: #fff7ed;
  --accent-100: #ffedd5;
  --accent-200: #fed7aa;
  --accent-300: #fdba74;
  --accent-400: #fb923c;
  --accent-500: #f97316;
  --accent-600: #ea580c;
  --accent-700: #c2410c;
  --accent-800: #9a3412;
  --accent-900: #7c2d12;

  /* Neutral Colors */
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  /* Semantic Colors */
  --success: #16a34a;
  --warning: #ea580c;
  --error: #dc2626;
  --info: #0284c7;

  /* Component Colors */
  --background: var(--neutral-50);
  --foreground: var(--neutral-900);
  --muted: var(--neutral-500);
  --border: var(--neutral-200);

  /* Link Colors */
  --link: var(--primary-600);
  --link-hover: var(--primary-700);

  /* Button Colors */
  --btn-primary-bg: var(--primary-600);
  --btn-primary-text: white;
  --btn-primary-hover: var(--primary-700);
  --btn-secondary-bg: var(--neutral-200);
  --btn-secondary-text: var(--neutral-700);
  --btn-secondary-hover: var(--neutral-300);
}

/* Background Colors */
.bg-primary { background-color: var(--primary-600); color: white; }
.bg-primary-light { background-color: var(--primary-100); }
.bg-accent { background-color: var(--accent-500); color: white; }
.bg-accent-light { background-color: var(--accent-100); }
.bg-neutral { background-color: var(--neutral-100); }
.bg-white { background-color: white; }

/* Text Colors */
.text-primary { color: var(--primary-600); }
.text-accent { color: var(--accent-600); }
.text-muted { color: var(--muted); }
.text-light { color: white; }
.text-dark { color: var(--neutral-900); }

/* Border Colors */
.border-primary { border-color: var(--primary-600); }
.border-accent { border-color: var(--accent-500); }
.border-neutral { border-color: var(--border); }

/* Status Colors */
.bg-success { background-color: var(--success); color: white; }
.bg-warning { background-color: var(--warning); color: white; }
.bg-error { background-color: var(--error); color: white; }
.bg-info { background-color: var(--info); color: white; }

/* Link Styles */
a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--link-hover);
}

/* Button Styles */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  transition: background-color 0.2s ease;
}

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

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: none;
  transition: background-color 0.2s ease;
}

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

/* Card Styles */
.card {
  background-color: white;
  border: 1px solid var(--border);
}

.card-header {
  background-color: var(--neutral-50);
  border-bottom: 1px solid var(--border);
}

/* Form Styles */
.form-control:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-500), 0.25);
}