@layer components {
  /* ===================================================
     TGK Toasts – Universal Notification System
     Version: 2.5  Tokenised + Consolidated (2026)
     Changes:
     • Updated to v2.5 token standard (full parity with root + all pillars)
     • Cleaner structure and comments
     • All animations, variants, dark mode support, and mobile behaviour preserved 100%
     =================================================== */

  #toast-container {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;

    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    z-index: 9999;
    pointer-events: none;
  }

  .tgk-toast {
    max-width: 320px;
    padding: 0.65rem 1rem;

    font-family: var(--type-body-font, var(--font-serif, "Libre Baskerville", serif));
    font-size: var(--font-size-sm);
    line-height: var(--type-copy-line, 1.6);

    border: 1px solid var(--section-border, rgba(186, 153, 60, 0.45));
    border-radius: var(--border-radius-base, 12px);

    color: var(--text-primary);
    background: var(--card-gradient, linear-gradient(
      135deg,
      rgba(255, 252, 235, 0.95),
      rgba(255, 246, 200, 0.92)
    ));

    box-shadow: var(--page-shadow-soft, 0 4px 16px rgba(186, 153, 60, 0.18));
    backdrop-filter: blur(6px);

    opacity: 0.98;
    transform-origin: bottom right;

    pointer-events: auto;

    animation: toastSlideIn 0.45s ease, toastFadeOut 0.5s ease 3s forwards;
  }

  /* Variants */
  .tgk-toast.success {
    border-color: color-mix(in oklab, var(--form-success-color, #32a862) 40%, transparent);
    background: color-mix(in oklab, var(--card-gradient) 75%, var(--form-success-color, #32a862) 25%);
    color: var(--text-primary);
    box-shadow: var(--page-shadow-soft);
  }

  .tgk-toast.error {
    border-color: color-mix(in oklab, var(--form-error-color, #d63c3c) 40%, transparent);
    background: color-mix(in oklab, var(--card-gradient) 75%, var(--form-error-color, #d63c3c) 25%);
    color: var(--text-primary);
    box-shadow: var(--page-shadow-soft);
  }

  .tgk-toast.remove {
    border-color: color-mix(in oklab, var(--highlight) 35%, transparent);
    background: color-mix(in oklab, var(--card-gradient) 80%, var(--highlight) 20%);
    color: var(--text-primary);
    box-shadow: var(--page-shadow-soft);
  }

  .tgk-toast.info {
    border-color: color-mix(in oklab, var(--text-accent) 35%, transparent);
    background: color-mix(in oklab, var(--card-gradient) 80%, var(--text-accent) 20%);
    color: var(--text-primary);
  }

  /* Animations */
  @keyframes toastSlideIn {
    0% { opacity: 0; transform: translateY(15px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes toastFadeOut {
    to { opacity: 0; transform: translateY(10px) scale(0.98); }
  }

  /* Dark mode */
  html[data-theme="dark"] .tgk-toast {
    color: var(--text-primary);
    border-color: var(--section-border, rgba(255, 215, 128, 0.2));
    box-shadow: var(--page-shadow-soft, 0 4px 16px rgba(255, 215, 128, 0.08));
  }

  /* Mobile */
  @media (max-width: 640px) {
    #toast-container {
      right: 1rem;
      bottom: 1rem;
    }

    .tgk-toast {
      font-size: 0.85rem;
      max-width: 85vw;
    }
  }
}