:root {
  --crm-primary-50: #f1f4fd;
  --crm-primary-600: #3f5ad1;
  --crm-primary-700: #3548c0;
  --crm-text-heading: #1f234c;
  --crm-text-muted: #6b7280;
  --crm-border: #e5e7eb;
  --crm-success: #22c55e;
  --crm-success-light: #dcfce7;
  --crm-accent: #3d54e4;
  --crm-bg-subtle: #ecefff;
}

* {
  box-sizing: border-box;
}

.crm-animate-in {
  animation: crm-fade-in 0.2s ease-out;
}

.crm-card,
.crm-metric-card,
.crm-quick-link {
  transition: all 0.2s ease;
}

.crm-card,
.crm-metric-card {
  background: #fff;
  border: 1px solid var(--crm-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.crm-metric-card {
  border-left: 4px solid var(--crm-primary-600);
}

.crm-metric-card.metric-success {
  border-left-color: var(--crm-success);
}

.crm-card:hover,
.crm-metric-card:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.crm-quick-link {
  display: block;
  padding: 0.75rem 0.875rem;
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

a.crm-quick-link:hover {
  text-decoration: none;
  background: #eef2ff;
}

@keyframes crm-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}