/* ============================================================
   Valet Design System — Permission Denied State Pattern
   Requires: base-tokens.css, client-tokens.css

   Shown when a user lacks capability to view a section.
   Distinct from empty state — communicates access, not absence.

   Anatomy:
     .permission-denied        wrapper
     .permission-denied-icon   lock/shield icon slot
     .permission-denied-title  primary message
     .permission-denied-body   explanation + next action copy
     .permission-denied-action CTA (optional — e.g. contact admin)
   ============================================================ */

.permission-denied {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-8);
  gap: var(--space-4);
}

.permission-denied-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: var(--radius-full);
  background-color: color-mix(in oklch, var(--color-bg) 50%, var(--slate));
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.permission-denied-icon svg {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

.permission-denied-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  max-inline-size: 28ch;
}

.permission-denied-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-inline-size: 44ch;
  margin: 0;
}

.permission-denied-action {
  margin-block-start: var(--space-2);
}