/* Shared pastel frames for navigation and chrome controls. */
.control-tone--gold { --control-tint: var(--feeling-surface-gold); }
.control-tone--sage { --control-tint: var(--feeling-surface-sage); }
.control-tone--coral { --control-tint: var(--feeling-surface-coral); }
.control-tone--blue { --control-tint: var(--feeling-surface-blue); }
.control-tone--lilac { --control-tint: color-mix(in srgb, var(--feeling-surface-lilac) 65%, var(--paper-aged)); }
.control-tone--mint { --control-tint: var(--sidebar-recenter-surface); }
.control-tone--pink { --control-tint: var(--feeling-surface-pink); }
.control-tone--periwinkle { --control-tint: var(--sidebar-followers-surface); }

.color-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--paper-shadow) 70%, var(--control-tint, var(--nav-item-surface, var(--paper-warm))));
  border-bottom-width: 2px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--dialog-key-surface), var(--control-tint, var(--nav-item-surface, var(--paper-warm))));
  color: var(--ink-soft);
  box-shadow: 0 2px 4px -3px color-mix(in srgb, var(--leather-brown) 30%, transparent);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.color-icon > svg { width: 18px; height: 18px; flex-shrink: 0; }

.color-action.btn-icon, .color-action.user-avatar {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--paper-shadow) 65%, var(--control-tint, var(--paper-warm)));
  border-bottom-width: 3px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--dialog-key-surface), var(--control-tint, var(--paper-warm)));
  color: var(--ink-dark);
  box-shadow: 0 3px 5px -4px color-mix(in srgb, var(--leather-brown) 35%, transparent), inset 0 1px 0 var(--dialog-key-surface);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.color-action.btn-icon:hover, .color-action.user-avatar:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ink-soft) 30%, var(--control-tint, var(--paper-warm)));
  box-shadow: 0 5px 9px -5px color-mix(in srgb, var(--leather-brown) 35%, transparent);
}
.color-action.btn-icon:active, .color-action.user-avatar:active { transform: translateY(1px); box-shadow: none; }
.color-action:focus-visible { outline: 2px solid var(--leather-brown); outline-offset: 3px; }
.color-action.btn-icon[aria-expanded="true"] { border-color: var(--sepia-line); box-shadow: inset 0 2px 4px color-mix(in srgb, var(--leather-brown) 12%, transparent); transform: translateY(1px); }
.color-action.user-avatar { padding: 0; overflow: hidden; border-bottom-width: 1px; }
@media (prefers-reduced-motion: reduce) { .color-icon, .color-action.btn-icon, .color-action.user-avatar { transition: none !important; } }