/* ── THEME TOGGLE ── */
@layer components {
  .theme-toggle {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
    z-index: 100;
  }

  .theme-toggle:hover {
    color: var(--text-primary);
    background: var(--surface-card);
  }

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

  .theme-toggle svg {
    width: 18px;
    height: 18px;
  }
}