/* ==========================================================================
   Panel Component
   ========================================================================== */

.panel {
  background-color: var(--color-canvas);
  border: var(--border-thick);
  box-shadow: var(--shadow-medium);
  padding: var(--space-xl);
}

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

.panel--secondary {
  background-color: var(--color-secondary);
  color: var(--color-canvas);
}

.panel--accent {
  background-color: var(--color-accent);
}

/* Panel internals - style by element */
.panel > h1,
.panel > h2,
.panel > h3 {
  margin-bottom: var(--space-lg);
}

.panel > p {
  margin-bottom: var(--space-md);
}