/* FILE: site/css/toast.css
   Migrated: xp/level colors kept as intentional semantic accents
   (distinct from brand palette by design — status notifications,
   not UI chrome). success/error now reference theme.css tokens. */
.aime-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.aime-toast {
  padding: 14px 24px;
  border-radius: var(--radius-md, 12px);
  /* FIX 2026-07-31: was hardcoded #fff. Every toast variant fills itself with
     a STATUS token, and the status tokens invert between themes -- light
     theme's are deep (#15803d, #b91c1c, #1d4ed8), dark theme's are pale
     (#34d399, #f87171, #8ab0ff). White text is therefore right in light and
     badly wrong in dark:

       #fff on --color-success  dark #34d399 = 1.92:1
       #fff on --color-danger   dark #f87171 = 2.77:1
       #fff on --color-accent-sapphire dark  = 2.16:1

     --color-on-fill inverts with the theme and clears 4.5:1 on all six
     (5.02 / 6.47 / 6.70 light, 10.00 / 6.95 / 8.91 dark).

     Sapphire numbers updated 2026-08-04, when the dark token was lightened
     #5c8dff -> #8ab0ff to stop it being the dimmest colour in the theme. Note
     which way each moved: the on-fill case got BETTER (6.14 -> 8.91) and the
     white case got WORSE (3.13 -> 2.16). That is the whole argument for this
     rule in one line -- a lighter fill rewards dark text and punishes white,
     so the token has to decide, not the call site.

     These were invisible to the audit until it learned that a rule can take
     its background from a VARIANT selector: .aime-toast declares the colour,
     .aime-toast.success declares the fill. */
  color: var(--color-on-fill);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  animation:
    toastIn 0.4s ease,
    toastOut 0.4s ease 2.6s forwards;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(10px);
}
.aime-toast.xp {
  background: linear-gradient(
    135deg,
    var(--color-xp-start),
    var(--color-xp-end)
  );
  /* The XP pair is the one gradient built from FIXED tokens (#10b981 ->
     #059669, identical in both themes), so unlike the other variants it needs
     the same text colour in both. Both stops are mid-bright greens: white is
     2.54:1 / 3.77:1 across the ramp, near-black is 7.58:1 / 5.10:1. Text must
     clear the requirement at BOTH ends of a gradient, not just the dark one. */
  color: var(--color-bg-base);
}
.aime-toast.level {
  /* START PINNED 2026-07-31: was var(--color-accent-sapphire), which is
     theme-swapped, against a fixed navy end. In dark theme that ran
     pale -> deep and nothing was readable across the whole ramp. Both stops
     are now fixed deep blues, so one light text colour works everywhere.
     Light theme renders identically -- --color-level-start IS light's
     sapphire value. */
  background: linear-gradient(
    135deg,
    var(--color-level-start),
    var(--color-level-end)
  );
  color: var(--color-fg-base);
}
.aime-toast.success {
  background: var(--color-success);
}
.aime-toast.error {
  background: var(--color-danger);
}
.aime-toast.info {
  background: var(--color-accent-sapphire);
}
.aime-toast .toast-icon {
  font-size: 1.4rem;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}