/*
 * 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 {
  .flash {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid;
    font-size: 0.875rem;
    line-height: 1.4;
    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 {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.0625rem;
    color: inherit;
  }

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