/*
 * Flash — transient banner messages driven by `flash[:alert]` /
 * `flash[:notice]`. Plain CSS, no JS. Use `role="alert"` for errors so
 * screen readers announce them.
 *
 * Color treatment: each variant derives its background, border, and
 * text from a single status anchor (`--color-danger`, `--color-success`)
 * via `oklch(from …)`. The pattern, per variant, is:
 *
 *   --flash-status: <anchor>;
 *   background:    very light, near-zero chroma, anchor's hue
 *   border-color:  light, low chroma, anchor's hue
 *   color:         dark, near-full chroma, anchor's hue
 *
 * Swapping the anchor token retunes the whole banner family — bg,
 * border, and text all move together with no extra dials.
 */

@layer components {
  /* Stack wrapper — gives flashes breathing room from the page edge
     (matching the content-page gutter) and spaces multiple banners. */
  .flash-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) clamp(1rem, 3vw, 2.5rem) 0;
  }

  .flash {
    /* Hairline border — universal 1px border-width; the token scale
       does not yet include a border-width ramp, so the component
       declares its own. */
    --flash-border-size: 1px;

    display: flex;
    align-items: flex-start;
    gap: var(--space-2-5);
    padding: var(--space-3) var(--space-3-5);
    border-radius: var(--radius-md);
    border: var(--flash-border-size) solid;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    font-weight: 500;

    /* Stronger derivation than a typical "soft" flash so the variants
       are easy to tell apart at a glance — important for colorblind
       readers. Tune these three rows to push prominence up or down
       across all variants in one go. */
    background:   oklch(from var(--flash-status) 0.94 calc(c * 0.18) h);
    border-color: oklch(from var(--flash-status) 0.72 calc(c * 0.5)  h);
    color:        oklch(from var(--flash-status) 0.32 calc(c * 0.75) h);
  }

  .flash__icon {
    /* Icon dimensions + optical-baseline nudge — flash-specific
       (icon is slightly larger than body type to read at a glance,
       and the 1px top-nudge centers the icon against text leading). */
    --flash-icon-size: 1.125rem;
    --flash-icon-nudge: 0.0625rem;

    flex: 0 0 auto;
    width: var(--flash-icon-size);
    height: var(--flash-icon-size);
    margin-top: var(--flash-icon-nudge);
    color: inherit;
  }

  .flash--notice  { --flash-status: var(--color-success); }
  .flash--alert   { --flash-status: var(--color-danger);  }
  .flash--warning { --flash-status: var(--color-warning); }
}