/*
  Button component — built directly from the live Figma master component
  (COMPONENT_SET 2624:6375), verified variant by variant via the Figma
  Plugin API rather than approximated from memory.

  Every colour, shadow, radius and spacing value below is a CSS custom
  property resolved from the real token export (tokens.tokens.json).
  No hardcoded hex values, no hardcoded px values for anything that has
  a token. The only literal numbers here are the font-size/letter-spacing
  pairs per size and the fixed heights — both measured directly off the
  Figma component, which does not alias those to a shared type/spacing
  token (confirmed by inspecting bound variables on the live node; these
  are deliberately bespoke per-size overrides in the source file, not an
  oversight in this build).

  Requires (load before this file):
    tokens-primitives.css
    tokens-light.css  (+ tokens-dark.css for [data-theme="dark"])
    tokens-desktop.css (+ tokens-mobile.css for [data-density="mobile"])
*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--radius-sm);
  font-family: var(--type-family-semibold), Arial, sans-serif;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, box-shadow 120ms ease;
  -webkit-font-smoothing: antialiased;
}

.btn:disabled,
.btn[disabled] {
  cursor: not-allowed;
}

/* ---- Layout modifiers ---- */

.btn--full-width {
  width: 100%;
}

/* ---- Sizes ---- (measured from the Figma component: 32 / 40 / 48px tall) */

.btn--small {
  height: 32px;
  padding-inline: var(--spacing-xs);
  font-size: var(--type-button-sm-size);
  line-height: var(--type-button-sm-line-height);
  letter-spacing: var(--type-button-sm-letter-spacing);
}

.btn--medium {
  height: 40px;
  padding-inline: var(--spacing-sm);
  font-size: var(--type-button-md-size);
  line-height: var(--type-button-md-line-height);
  letter-spacing: var(--type-button-md-letter-spacing);
}

.btn--large {
  height: 48px;
  padding-inline: var(--spacing-sm);
  font-size: var(--type-button-lg-size);
  line-height: var(--type-button-lg-line-height);
  letter-spacing: var(--type-button-lg-letter-spacing);
}

/* ---- Variant: Primary ---- */

.btn--primary {
  background-color: var(--background-action-primary);
  color: var(--text-on-action);
  box-shadow: 0 1px 0 0 var(--border-action);
}
.btn--primary:hover:not(:disabled) {
  background-color: var(--background-action-primary-hover);
}
.btn--primary:active:not(:disabled) {
  background-color: var(--background-action-primary-pressed);
  box-shadow: none;
}
.btn--primary:focus-visible {
  background-color: var(--background-action-primary);
  box-shadow:
    0 0 0 1px var(--border-focus-inner),
    0 0 0 4px var(--border-focus);
}

/* ---- Variant: Secondary ---- */

.btn--secondary {
  background-color: var(--background-action-secondary);
  color: var(--text-on-action-secondary);
  box-shadow: 0 1px 0 0 var(--border-action-secondary);
}
.btn--secondary:hover:not(:disabled) {
  background-color: var(--background-action-secondary-hover);
}
.btn--secondary:active:not(:disabled) {
  background-color: var(--background-action-secondary-pressed);
  box-shadow: none;
}
.btn--secondary:focus-visible {
  background-color: var(--background-action-secondary);
  box-shadow:
    0 0 0 1px var(--border-focus-inner),
    0 0 0 4px var(--border-focus);
}

/* ---- Variant: Ghost ---- (no resting shadow in the source component) */

.btn--ghost {
  background-color: var(--background-action-ghost);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border-ghost);
}
.btn--ghost:hover:not(:disabled) {
  background-color: var(--background-action-ghost-hover);
}
.btn--ghost:active:not(:disabled) {
  background-color: var(--background-action-ghost-pressed);
}
.btn--ghost:focus-visible {
  background-color: var(--background-action-ghost);
  box-shadow:
    0 0 0 1px var(--border-focus-inner),
    0 0 0 4px var(--border-focus);
}

/* ---- Variant: Destructive ---- */

.btn--destructive {
  background-color: var(--background-action-destructive);
  color: var(--text-on-danger);
  box-shadow: 0 1px 0 0 var(--border-error);
}
.btn--destructive:hover:not(:disabled) {
  background-color: var(--background-action-destructive-hover);
}
.btn--destructive:active:not(:disabled) {
  background-color: var(--background-action-destructive-pressed);
  box-shadow: none;
}
.btn--destructive:focus-visible {
  background-color: var(--background-action-destructive);
  box-shadow:
    0 0 0 1px var(--border-focus-inner),
    0 0 0 4px var(--border-focus);
}

/* ---- Disabled ---- (same across all four variants, per source component) */

.btn:disabled,
.btn[disabled] {
  background-color: var(--background-disabled) !important;
  color: var(--text-disabled) !important;
  box-shadow: none !important;
}

/* ---- Label span — used in both plain and icon variants ---- */
.btn__label {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ---- With-icon variant ---- */
.btn--icon {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.btn--icon .btn__label {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 var(--spacing-md);
}
.btn__divider {
  width: 1px;
  align-self: stretch;
  flex-shrink: 0;
}
.btn--primary .btn__divider     { background-color: var(--border-action); }
.btn--secondary .btn__divider   { background-color: var(--border-action-secondary); }
.btn--ghost .btn__divider       { background-color: var(--border-ghost); }
.btn--destructive .btn__divider { background-color: var(--border-error); }
.btn:disabled .btn__divider     { background-color: var(--text-disabled); }
.btn__icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn--icon.btn--small .btn__icon-container  { width: 32px; height: 32px; }
.btn--icon.btn--medium .btn__icon-container { width: 40px; height: 40px; }
.btn--icon.btn--large .btn__icon-container  { width: 48px; height: 48px; }
.btn__icon {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  fill: currentColor;
  display: block;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Demo state simulation — used by Storybook stories and the reference sheet
   to force hover/focus/pressed states without real interaction.
   -------------------------------------------------------------------------- */
.demo-hover .btn--primary:not(:disabled)         { background-color: var(--background-action-primary-hover); }
.demo-hover .btn--secondary:not(:disabled)       { background-color: var(--background-action-secondary-hover); }
.demo-hover .btn--ghost:not(:disabled)           { background-color: var(--background-action-ghost-hover); }
.demo-hover .btn--destructive:not(:disabled)     { background-color: var(--background-action-destructive-hover); }

.demo-pressed .btn--primary:not(:disabled)       { background-color: var(--background-action-primary-pressed); box-shadow: none; }
.demo-pressed .btn--secondary:not(:disabled)     { background-color: var(--background-action-secondary-pressed); box-shadow: none; }
.demo-pressed .btn--ghost:not(:disabled)         { background-color: var(--background-action-ghost-pressed); box-shadow: none; }
.demo-pressed .btn--destructive:not(:disabled)   { background-color: var(--background-action-destructive-pressed); box-shadow: none; }

.demo-focus .btn--primary:not(:disabled),
.demo-focus .btn--secondary:not(:disabled),
.demo-focus .btn--ghost:not(:disabled),
.demo-focus .btn--destructive:not(:disabled)     { outline: none; box-shadow: 0 0 0 1px var(--border-focus-inner), 0 0 0 4px var(--border-focus); }

.demo-focus-hover .btn--primary:not(:disabled)   { outline: none; background-color: var(--background-action-primary-hover); box-shadow: 0 0 0 1px var(--border-focus-inner), 0 0 0 4px var(--border-focus); }
.demo-focus-hover .btn--secondary:not(:disabled) { outline: none; background-color: var(--background-action-secondary-hover); box-shadow: 0 0 0 1px var(--border-focus-inner), 0 0 0 4px var(--border-focus); }
.demo-focus-hover .btn--ghost:not(:disabled)     { outline: none; background-color: var(--background-action-ghost-hover); box-shadow: 0 0 0 1px var(--border-focus-inner), 0 0 0 4px var(--border-focus); }
.demo-focus-hover .btn--destructive:not(:disabled){ outline: none; background-color: var(--background-action-destructive-hover); box-shadow: 0 0 0 1px var(--border-focus-inner), 0 0 0 4px var(--border-focus); }