/* =====================================================================
   Button — Figma "Button" component set (node 506:6060)
   variant: primary | secondary | ghost | inline      (+ on-dark: inverse)
   size:    (default large 48) | --sm (40)
   icon:    leading "+" (.btn__icon) | --icon-only (square)
   states:  default / hover / pressed / focus / disabled
            real :hover :active :focus-visible :disabled, or forced
            .is-hover .is-pressed .is-focus (design-system page)
   ===================================================================== */
/* Secondary / ghost colours and the Button/Surface effect styles live in tokens.css (--button-secondary-*, --shadow-button-*). */
.btn{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);
  height:48px;padding:var(--space-12) var(--space-18);border:1px solid transparent;border-radius:var(--radius-md);   /* Figma Button Large 46:1115 / 46:1117: 12 / 18 */
  font:400 var(--fs-sm)/var(--lh-sm) var(--font-body);white-space:nowrap;text-decoration:none;cursor:pointer;
  color:var(--text-primary);background:transparent;
  transition:background-color .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;
}
.btn__icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--sm{height:40px;padding:var(--space-8) var(--space-16);font-size:var(--fs-xs);line-height:var(--lh-xs)}
.btn--sm .btn__icon{width:16px;height:16px}
.btn--icon-only{width:48px;padding:var(--space-12)}
.btn--icon-only .btn__icon{width:24px;height:24px}
.btn--sm.btn--icon-only{width:40px;padding:var(--space-8)}
.btn--sm.btn--icon-only .btn__icon{width:20px;height:20px}
/* XS (Figma 506:6060, 1570:4–1570:121): 28 tall with text (6px padding, 6px gap, 12px icon), 32×32 icon only (20px icon) */
.btn--xs{height:28px;padding:var(--space-6);gap:var(--space-6);font-size:var(--fs-xs);line-height:var(--lh-xs)}
.btn--xs .btn__icon{width:12px;height:12px}
.btn--xs.btn--icon-only{width:32px;height:32px;padding:var(--space-6)}
.btn--xs.btn--icon-only .btn__icon{width:20px;height:20px;stroke-width:2}

/* Primary */
.btn--primary{background:var(--button-primary-bg);border-color:var(--button-primary-border);color:var(--button-primary-text);box-shadow:var(--shadow-button-default)}
.btn--primary:is(:hover,.is-hover){background:var(--button-primary-bg-hover);box-shadow:var(--shadow-button-hover)}
.btn--primary:is(:active,.is-pressed){background:var(--button-primary-bg-pressed);box-shadow:var(--shadow-button-pressed)}
/* Variant=Destructive (Prompt 14 A5): Sign out / Delete. button/destructive/* fills, white label (button/primary/text in Light), Button/Surface shadows */
.btn--destructive{background:var(--button-destructive-bg);border-color:var(--button-destructive-bg);color:var(--neutral-0);box-shadow:var(--shadow-button-default)}
.btn--destructive:is(:hover,.is-hover){background:var(--button-destructive-bg-hover);border-color:var(--button-destructive-bg-hover);box-shadow:var(--shadow-button-hover)}
.btn--destructive:is(:active,.is-pressed){background:var(--button-destructive-bg-pressed);border-color:var(--button-destructive-bg-pressed);box-shadow:var(--shadow-button-pressed)}
/* Secondary */
.btn--secondary{background:var(--button-secondary-bg);border-color:var(--button-secondary-border);color:var(--text-primary);box-shadow:var(--shadow-button-default)}
.btn--secondary:is(:hover,.is-hover){background:var(--button-secondary-bg-hover);border-color:var(--button-secondary-border-hover);box-shadow:var(--shadow-button-hover)}
.btn--secondary:is(:active,.is-pressed){background:var(--button-secondary-bg-pressed);border-color:var(--button-secondary-border-pressed);box-shadow:var(--shadow-button-pressed)}
/* Ghost + Inline (text-only look) */
.btn--ghost,.btn--inline{color:var(--text-primary)}
.btn--ghost:is(:hover,.is-hover),.btn--inline:is(:hover,.is-hover){background:var(--button-ghost-bg-hover)}
.btn--ghost:is(:active,.is-pressed),.btn--inline:is(:active,.is-pressed){background:var(--button-ghost-bg-pressed)}
/* Navbar "For you" on feed.html (Figma 1453:52543): active = accent fill */
.btn--secondary.is-active{background:var(--accent-default);border-color:var(--accent-default);color:var(--accent-text)}
.btn--secondary.is-active:is(:hover,.is-hover){background:var(--accent-hover);border-color:var(--accent-hover)}
/* Focus */
.btn:focus-visible,.btn.is-focus{outline:none;box-shadow:var(--shadow-button-focus)}
.btn--ghost:focus-visible,.btn--inline:focus-visible,.btn--ghost.is-focus,.btn--inline.is-focus{box-shadow:var(--effect-button-focus-ring)}
/* Disabled */
.btn:disabled,.btn.is-disabled,.btn[aria-disabled="true"]{opacity:.35;pointer-events:none;box-shadow:var(--shadow-button-disabled)}
.btn--secondary:disabled,.btn--secondary.is-disabled{opacity:1;background:var(--button-secondary-bg-disabled);border-color:var(--button-secondary-border);color:var(--button-secondary-text-disabled)}
/* Danger (settings, Figma 1464:44029): feedback/error fill, white text — only for the final "Delete account" confirm.
   Danger text: a Secondary button with error-coloured text (the "Delete" row button, 1445:459). */
.btn--danger{background:var(--feedback-error);border-color:var(--feedback-error);color:var(--text-inverse);box-shadow:var(--shadow-button-default)}
.btn--danger:is(:hover,.is-hover){filter:brightness(.93);box-shadow:var(--shadow-button-hover)}
.btn--danger:is(:active,.is-pressed){filter:brightness(.86);box-shadow:var(--shadow-button-pressed)}
.btn--danger:is(:disabled,.is-disabled){opacity:.45;filter:none;cursor:default;box-shadow:none}
.btn--danger-text{color:var(--feedback-error)}
/* Follow / Following (Figma Button set 506:6060, Size=Small only; used in Topic cards). Not the pill .follow-btn (4:290).
   1.5px borders are drawn with an inset ring so the button does not change size between states. */
.btn--follow{background:var(--surface-default);border-color:var(--button-secondary-border);color:var(--text-primary);box-shadow:var(--shadow-button-default)}
.btn--follow:is(:hover,.is-hover){background:var(--surface-background);border-color:var(--accent-default);box-shadow:inset 0 0 0 .5px var(--accent-default),var(--shadow-button-hover)}
.btn--follow:is(:active,.is-pressed){background:var(--button-secondary-bg-pressed);border-color:var(--button-secondary-border-pressed);box-shadow:var(--shadow-button-pressed)}
.btn--following{background:var(--accent-default);border-color:var(--accent-default);color:var(--accent-text);box-shadow:var(--shadow-button-default)}
.btn--following:is(:hover,.is-hover,:active,.is-pressed){background:var(--accent-hover);border-color:var(--accent-default);box-shadow:inset 0 0 0 .5px var(--accent-default),var(--shadow-button-hover)}
.btn--following .btn__icon{display:none}
:is(.btn--follow,.btn--following):is(:disabled,.is-disabled){background:var(--border-subtle);border-color:var(--border-subtle);color:var(--text-secondary);box-shadow:none;cursor:default}
.btn.is-pop{animation:pop .45s var(--ease-out)}

/* On dark surfaces (Storied Originals) */
.btn--inverse{background:var(--neutral-0);color:var(--neutral-900);border-color:transparent}
.btn--inverse:is(:hover,.is-hover){background:var(--button-inverse-bg-hover)}
.btn--inverse:is(:active,.is-pressed){background:var(--button-inverse-bg-pressed)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* Navbar buttons use the navigation state tokens */
.nav .btn--primary:is(:hover,.is-hover){background:var(--button-nav-primary-bg-hover)}
.nav .btn--primary:is(:active,.is-pressed){background:var(--button-nav-primary-bg-pressed)}
.nav .btn--secondary:is(:hover,.is-hover){background:var(--button-nav-secondary-bg-hover)}
.nav .btn--secondary:is(:active,.is-pressed){background:var(--button-nav-secondary-bg-pressed)}

:root[data-theme="dark"] .btn--secondary:disabled,:root[data-theme="dark"] .btn--secondary.is-disabled{background:var(--border-subtle);border-color:var(--button-secondary-border);color:var(--text-secondary)}


/* Optional label per breakpoint (button macro labelSm): the --sm label shows under 1024px, e.g. the For you header
   "See More" (desktop, Figma 1751:72132) / "See your Feed" (tablet 1812:74830). */
.btn__label--sm{display:none}
@media (max-width:1023px){.btn__label--lg{display:none}.btn__label--sm{display:inline}}

/* Variant=Link (Figma 506:6060): text-style action, underlined, no fill or border; replaces the removed Text Link component */
.btn--link{height:auto;min-height:0;padding:0;border:0;background:none;box-shadow:none;color:var(--text-primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.btn--link:is(:hover,.is-hover){color:var(--text-link);background:none}
.btn--link:is(:active,.is-pressed){color:var(--text-secondary);background:none}
.btn--link:focus-visible,.btn--link.is-focus{box-shadow:var(--shadow-focus-button-ring);border-radius:var(--radius-sm)}