@layer components {
  .alert {
    padding: var(--block-space) var(--inline-space);
    border-radius: var(--radius-md);
    margin-block-end: var(--block-space);
    font-size: var(--text-sm);
  }

  .alert--error {
    background-color: oklch(from var(--color-red) 95% 0.05 h);
    border: 1px solid oklch(from var(--color-red) 85% 0.1 h);
    color: oklch(from var(--color-red) 35% 0.15 h);
  }

  .alert--success {
    background-color: oklch(from var(--color-green) 95% 0.05 h);
    border: 1px solid oklch(from var(--color-green) 85% 0.1 h);
    color: oklch(from var(--color-green) 35% 0.15 h);
  }

  .alert--warning {
    background-color: oklch(from var(--color-orange) 95% 0.05 h);
    border: 1px solid oklch(from var(--color-orange) 85% 0.1 h);
    color: oklch(from var(--color-orange) 35% 0.15 h);
  }

  .alert--info {
    background-color: oklch(from var(--color-blue) 95% 0.03 h);
    border: 1px solid oklch(from var(--color-blue) 85% 0.08 h);
    color: oklch(from var(--color-blue) 35% 0.15 h);
  }

  .alert code {
    font-family: var(--font-family-mono);
    background-color: oklch(0% 0 0 / 0.1);
    padding: 0.1em 0.3em;
    border-radius: var(--radius-sm);
  }

  /* Flash messages - positioned at top of page */
  .flash {
    position: fixed;
    inset-block-start: var(--header-height);
    inset-inline: 0;
    z-index: var(--z-flash);
    display: flex;
    justify-content: center;
    padding: var(--block-space-sm) var(--inline-space-lg);
    pointer-events: none;
  }

  .flash__message {
    pointer-events: auto;
    animation: flash-in 0.3s ease-out;
  }

  @keyframes flash-in {
    from {
      opacity: 0;
      transform: translateY(-1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}