/* =====================================================================
   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)
   ===================================================================== */
:root{
  --button-secondary-bg:var(--surface-default); --button-secondary-bg-hover:#F7F5F0; --button-secondary-bg-pressed:#EDEBE3;
  --button-secondary-border:#E5E1D8; --button-secondary-border-hover:#DDD6C8; --button-secondary-border-pressed:#C4B9A6;
  --button-ghost-bg-hover:var(--button-nav-ghost-bg-hover); --button-ghost-bg-pressed:var(--button-nav-ghost-bg-pressed);
  --button-inset:inset 0 -1px 2px rgba(0,0,0,.1),inset 0 1px 2px rgba(255,255,255,.4);
  --button-shadow:var(--effect-button-default);
  --button-shadow-hover:var(--effect-button-hover);
  --button-shadow-pressed:var(--effect-button-pressed);
}
:root[data-theme="dark"]{
  /* Secondary · Dark — Figma only partly tokenised this; filled in so text/background always contrast */
  --button-secondary-bg:#36302B; --button-secondary-bg-hover:var(--neutral-650); --button-secondary-bg-pressed:var(--neutral-600);
  --button-secondary-border:#4A433E; --button-secondary-border-hover:var(--border-default); --button-secondary-border-pressed:var(--border-strong);
}
.btn{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:12px 24px;border:1px solid transparent;border-radius:var(--radius-md);
  font:400 14px/20px 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:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--sm{height:40px;padding:8px 16px;font-size:12px;line-height:16px}
.btn--sm .btn__icon{width:16px;height:16px}
.btn--icon-only{width:48px;padding:12px}
.btn--icon-only .btn__icon{width:24px;height:24px}
.btn--sm.btn--icon-only{width:40px;padding:8px}
.btn--sm.btn--icon-only .btn__icon{width:20px;height:20px}

/* Primary */
.btn--primary{background:var(--button-primary-bg);border-color:var(--button-primary-border);color:var(--button-primary-text);box-shadow:var(--button-shadow),var(--button-inset)}
.btn--primary:is(:hover,.is-hover){background:var(--button-primary-bg-hover);box-shadow:var(--button-shadow-hover),var(--button-inset)}
.btn--primary:is(:active,.is-pressed){background:var(--button-primary-bg-pressed);box-shadow:var(--button-shadow-pressed),var(--button-inset)}
/* Secondary */
.btn--secondary{background:var(--button-secondary-bg);border-color:var(--button-secondary-border);color:var(--text-primary);box-shadow:var(--button-shadow),var(--button-inset)}
.btn--secondary:is(:hover,.is-hover){background:var(--button-secondary-bg-hover);border-color:var(--button-secondary-border-hover);box-shadow:var(--button-shadow-hover),var(--button-inset)}
.btn--secondary:is(:active,.is-pressed){background:var(--button-secondary-bg-pressed);border-color:var(--button-secondary-border-pressed);box-shadow:var(--button-shadow-pressed),var(--button-inset)}
/* 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)}
/* Focus */
.btn:focus-visible,.btn.is-focus{outline:none;box-shadow:var(--button-shadow),var(--button-inset),var(--effect-button-focus-ring)}
.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:none}
.btn--secondary:disabled,.btn--secondary.is-disabled{opacity:1;background:#EDE8DF;border-color:#E5E1D8;color:#6B5E4D}

/* On dark surfaces (Storied Originals) */
.btn--inverse{background:var(--neutral-0);color:#14120F;border-color:transparent}
.btn--inverse:is(:hover,.is-hover){background:#F7F5F0}
.btn--inverse:is(:active,.is-pressed){background:#EDEBE3}
@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:#4A433E;color:var(--text-secondary)}