@layer components {
  /* ===================================================
     Floating Toggles + Theme & Utility Tray
     Version: 2.5  Tokenised + Consolidated (2026)
     Changes:
     • Updated to v2.5 token standard (full parity with root + all pillars)
     • Cleaner structure and comments
     • All floating positioning (safe-area-inset), open/visible states,
       hover transforms, focus states, and reduced-motion safety preserved 100%
     =================================================== */

  .floating-toggles {
    position: fixed;
    top: calc(var(--space-md) + env(safe-area-inset-top));
    right: calc(var(--space-md) + env(safe-area-inset-right));
    bottom: auto;
    left: auto;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);

    z-index: var(--z-floating, 10050);
    pointer-events: none;
  }

  /* show immediately (JS adds .is-visible) */
  .floating-toggles.is-visible { pointer-events: auto; }

  .floating-toggles-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
  }

  .floating-toggles-menu-toggle {
    display: inline-flex;
  }

  .floating-toggles-actions {
    display: none;
  }

  .floating-toggles.is-open .floating-toggles-actions {
    display: flex;
  }

  /* button base */
  .theme-toggle-floating {
    font-family: var(--font-display);
    background-color: transparent;
    color: var(--text-accent);

    width: var(--toggle-size, 3rem);
    height: var(--toggle-size, 3rem);
    border-radius: 9999px;
    font-size: var(--font-size-toggle);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    box-shadow: 0 0 12px var(--shadow-glow);
    border: 0;
    outline: 0;
    backdrop-filter: blur(2px);

    pointer-events: auto;

    transform: translateZ(0);
    will-change: transform;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }

  .theme-toggle-floating:hover {
    background-color: var(--highlight);
    color: var(--bg-primary);
    transform: translateY(-1px);
  }

  .theme-toggle-floating:focus-visible {
    outline: 2px solid var(--highlight);
    outline-offset: 2px;
  }

  .theme-toggle-floating[hidden] { display: none !important; }

  .theme-toggle-floating .icon-svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    color: currentColor;
  }

  @media (max-width: 768px) {
    .theme-toggle-floating {
      width: 44px;
      height: 44px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .theme-toggle-floating { transition: none; }
    .theme-toggle-floating:hover { transform: none; }
  }
}