@layer components {
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: all 150ms ease;
  }

  a.card:hover,
  .card--interactive:hover {
    border-color: var(--color-slate-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .card--padded {
    padding: var(--block-space-double);
  }

  .card--compact {
    padding: var(--block-space);
  }

  .card--subtle {
    background: var(--color-slate-100);
  }

  .card--elevated {
    box-shadow: var(--shadow-lg);
  }

  .card--danger {
    border-color: var(--color-rose-200);
  }

  .card--highlight {
    border-color: var(--color-emerald-200);
    background: var(--color-emerald-50);
  }

  .callout {
    background: var(--color-slate-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-ink-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: 1rem;
  }

  .callout--positive {
    background: var(--color-emerald-50);
    border-color: var(--color-emerald-100);
    color: var(--color-emerald-900);
  }

  .callout--warning {
    background: var(--color-amber-50);
    border-color: var(--color-amber-200);
    color: var(--color-amber-700);
  }

  .callout--danger {
    background: var(--color-rose-50);
    border-color: var(--color-rose-100);
    color: var(--color-rose-900);
  }

  .page-card--warning {
    background: var(--color-amber-50);
    border-color: var(--color-amber-200);
  }

  .avatar {
    align-items: center;
    background: var(--color-slate-100);
    border-radius: var(--radius-lg);
    color: var(--color-ink-muted);
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: 600;
    inline-size: 2.5rem;
    justify-content: center;
    min-block-size: 2.5rem;
  }

  .avatar--lg {
    font-size: var(--text-base);
    inline-size: 3rem;
    min-block-size: 3rem;
  }

  /* Dashboard cards - clickable metric/navigation cards */
  .dashboard-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: var(--block-space-double);
    text-decoration: none;
    transition: var(--transition-fast);
  }

  .dashboard-card:hover {
    border-color: var(--color-slate-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .dashboard-card__icon {
    align-items: center;
    background: var(--color-slate-100);
    border-radius: var(--radius-lg);
    color: var(--color-ink-muted);
    display: inline-flex;
    font-size: var(--text-lg);
    block-size: 3rem;
    inline-size: 3rem;
    justify-content: center;
  }

  .dashboard-card__icon--warning {
    background: var(--color-amber-100);
    color: var(--color-amber-700);
  }

  .dashboard-card__icon--info {
    background: var(--color-sky-100);
    color: var(--color-sky-700);
  }

  .dashboard-card__icon--positive {
    background: var(--color-emerald-100);
    color: var(--color-emerald-700);
  }

  .dashboard-card__icon--danger {
    background: var(--color-rose-100);
    color: var(--color-rose-700);
  }

  .dashboard-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-quarter);
  }

  .dashboard-card__title {
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .dashboard-card__description {
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
  }

  .dashboard-card__metric {
    color: var(--color-ink);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1;
  }

  .dashboard-card__metric-label {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }

  /* Email preview styles */
  .email-preview-container {
    background: var(--color-white);
  }

  .email-preview-iframe {
    border: none;
    min-block-size: 400px;
    width: 100%;
  }

  .email-preview-text {
    font-family: monospace;
    white-space: pre-wrap;
  }
}