/* ===========================================================================
   DesignOS — Button                                        Light Mode only
   ---------------------------------------------------------------------------
   Figma: page `-> Buttons`, component set `Button` (node 442:2632).
   4 sizes x (5 types + 4 icon-only) x 6 rows = 216 variants.

   Every value binds to a token emitted by build-tokens.mjs from the Figma
   variable export. Note the export's own naming: state suffixes use an
   underscore (`--bg-secondary_hover`), and the component radius theme token
   is the bare `--button`.

   Requires tokens.css.
   =========================================================================== */

.dos-btn {
  --dos-btn-bg: transparent;
  --dos-btn-fg: var(--text-brand);
  --dos-btn-border: transparent;
  --dos-btn-border-width: 0px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  box-sizing: border-box;
  height: var(--dos-btn-height);
  padding: var(--dos-btn-pad-y) var(--dos-btn-pad-x);
  border: var(--dos-btn-border-width) solid var(--dos-btn-border);
  border-radius: var(--button);
  background-color: var(--dos-btn-bg);
  color: var(--dos-btn-fg);
  font-family: var(--family-text);
  font-size: var(--dos-btn-font-size);
  line-height: var(--dos-btn-line-height);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color var(--motion-state) var(--motion-ease),
    border-color var(--motion-state) var(--motion-ease),
    color var(--motion-state) var(--motion-ease);
}

/* The Figma text slot carries its own 4px horizontal padding. */
.dos-btn__label { display: inline-flex; align-items: center; padding: var(--spacing-0) var(--spacing-4); position: relative; }
.dos-btn__icon  { display: block; flex: none; width: var(--dos-btn-icon-size); height: var(--dos-btn-icon-size); position: relative; }

.dos-btn:focus-visible { outline: 2px solid var(--border-focus-ring); outline-offset: 2px; }

/* --- Size ------------------------------------------------------------------
   md (10px) and lg (14px) vertical padding are off the UI spacing scale.
   Reproduced verbatim from the source.
   -------------------------------------------------------------------------- */
.dos-btn--sm { --dos-btn-height: 32px; --dos-btn-pad-y: var(--spacing-6);  --dos-btn-pad-x: var(--spacing-12); --dos-btn-font-size: var(--font-size-paragraph-sm); --dos-btn-line-height: var(--line-height-paragraph-sm); --dos-btn-icon-size: 16px; --dos-btn-loading-width: 117px; }
.dos-btn--md { --dos-btn-height: 40px; --dos-btn-pad-y: 10px;              --dos-btn-pad-x: var(--spacing-12); --dos-btn-font-size: var(--font-size-paragraph-sm); --dos-btn-line-height: var(--line-height-paragraph-sm); --dos-btn-icon-size: 16px; --dos-btn-loading-width: 117px; }
.dos-btn--lg { --dos-btn-height: 48px; --dos-btn-pad-y: 14px;              --dos-btn-pad-x: var(--spacing-16); --dos-btn-font-size: var(--font-size-paragraph-sm); --dos-btn-line-height: var(--line-height-paragraph-sm); --dos-btn-icon-size: 20px; --dos-btn-loading-width: 125px; }
.dos-btn--xl { --dos-btn-height: 56px; --dos-btn-pad-y: var(--spacing-16); --dos-btn-pad-x: var(--spacing-24); --dos-btn-font-size: var(--font-size-paragraph-md); --dos-btn-line-height: var(--line-height-paragraph-md); --dos-btn-icon-size: 20px; --dos-btn-loading-width: 155px; }

/* Icon-only is a fixed square with a centred glyph. The xl glyph is 24px —
   larger than the 20px used in the xl text button. That is in the source. */
.dos-btn--icon-only { width: var(--dos-btn-height); padding: 0; }
.dos-btn--icon-only.dos-btn--xl { --dos-btn-icon-size: 24px; }

/* --- Type — resting -------------------------------------------------------- */
.dos-btn--default   { --dos-btn-bg: var(--bg-brand-solid); --dos-btn-fg: var(--text-alt); }
.dos-btn--secondary { --dos-btn-bg: var(--bg-secondary);   --dos-btn-fg: var(--text-primary); }
.dos-btn--outline   { --dos-btn-bg: var(--bg-primary);     --dos-btn-fg: var(--text-brand); --dos-btn-border: var(--border-brand-secondary); --dos-btn-border-width: 1px; }
.dos-btn--ghost     { --dos-btn-bg: transparent;           --dos-btn-fg: var(--text-brand); }
.dos-btn--link      { --dos-btn-bg: transparent;           --dos-btn-fg: var(--text-brand); height: auto; padding: var(--spacing-0); border-radius: 0; }

/* --- Hover ----------------------------------------------------------------- */
.dos-btn--default:hover:not(:disabled):not(.is-loading),   .dos-btn--default.is-hover   { --dos-btn-bg: var(--bg-brand-hover); }
.dos-btn--secondary:hover:not(:disabled):not(.is-loading), .dos-btn--secondary.is-hover { --dos-btn-bg: var(--bg-secondary_hover); }
.dos-btn--outline:hover:not(:disabled):not(.is-loading),   .dos-btn--outline.is-hover   { --dos-btn-bg: var(--bg-brand-primary_hover); }
.dos-btn--ghost:hover:not(:disabled):not(.is-loading),     .dos-btn--ghost.is-hover     { --dos-btn-bg: var(--bg-brand-primary_hover); }

/* --- Press ----------------------------------------------------------------- */
.dos-btn--default:active:not(:disabled):not(.is-loading),   .dos-btn--default.is-press   { --dos-btn-bg: var(--bg-brand-press); }
.dos-btn--secondary:active:not(:disabled):not(.is-loading), .dos-btn--secondary.is-press { --dos-btn-bg: var(--bg-secondary_press); }
.dos-btn--outline:active:not(:disabled):not(.is-loading),   .dos-btn--outline.is-press   { --dos-btn-bg: var(--bg-brand-primary_press); }
.dos-btn--ghost:active:not(:disabled):not(.is-loading),     .dos-btn--ghost.is-press     { --dos-btn-bg: var(--bg-brand-primary_press); }

/* ===========================================================================
   🚨 Error = True
   ---------------------------------------------------------------------------
   Figma exposes Error=True only at State=Default, so hover and press are
   derived — but derived the way the system already derives them elsewhere.

   The brand solid button steps its own ramp: bg-brand-solid is brand/950,
   bg-brand-hover is brand/800, bg-brand-press is brand/700. bg-error-solid is
   error/600, so its hover and press are error/700 and error/800. Those two
   steps are missing from the export, so they are defined as semantic roles
   (--bg-error-solid_hover / _press) rather than faked with a neutral overlay.

   Every state below is a named fill. Nothing tints, so the label always sits
   at full --text-on-error-solid and no state layer covers the content.
   =========================================================================== */

.dos-btn--error.dos-btn--default   { --dos-btn-bg: var(--bg-error-solid); --dos-btn-fg: var(--text-on-error-solid); }
.dos-btn--error.dos-btn--secondary { --dos-btn-bg: var(--bg-error);       --dos-btn-fg: var(--text-error); }
.dos-btn--error.dos-btn--outline   { --dos-btn-bg: var(--bg-primary);     --dos-btn-fg: var(--text-error); --dos-btn-border: var(--border-error-secondary); --dos-btn-border-width: 1px; }
.dos-btn--error.dos-btn--ghost,
.dos-btn--error.dos-btn--link      { --dos-btn-bg: transparent;           --dos-btn-fg: var(--text-error); }

/* Solid: step the error ramp, exactly as bg-brand-solid steps the brand ramp. */
.dos-btn--error.dos-btn--default:hover:not(:disabled):not(.is-loading),
.dos-btn--error.dos-btn--default.is-hover  { --dos-btn-bg: var(--bg-error-solid_hover); }
.dos-btn--error.dos-btn--default:active:not(:disabled):not(.is-loading),
.dos-btn--error.dos-btn--default.is-press  { --dos-btn-bg: var(--bg-error-solid_press); }

/* Soft: step up the error surface ramp. */
.dos-btn--error.dos-btn--secondary:hover:not(:disabled):not(.is-loading),
.dos-btn--error.dos-btn--secondary.is-hover { --dos-btn-bg: var(--bg-error-secondary); }
.dos-btn--error.dos-btn--secondary:active:not(:disabled):not(.is-loading),
.dos-btn--error.dos-btn--secondary.is-press { --dos-btn-bg: var(--bg-error_press); }

/* Transparent: pick up the soft error surface rather than a grey wash. */
.dos-btn--error.dos-btn--outline:hover:not(:disabled):not(.is-loading),
.dos-btn--error.dos-btn--outline.is-hover,
.dos-btn--error.dos-btn--ghost:hover:not(:disabled):not(.is-loading),
.dos-btn--error.dos-btn--ghost.is-hover     { --dos-btn-bg: var(--bg-error); }

.dos-btn--error.dos-btn--outline:active:not(:disabled):not(.is-loading),
.dos-btn--error.dos-btn--outline.is-press,
.dos-btn--error.dos-btn--ghost:active:not(:disabled):not(.is-loading),
.dos-btn--error.dos-btn--ghost.is-press     { --dos-btn-bg: var(--bg-error_press); }

/* Link never takes a fill, in any state. */
.dos-btn--error.dos-btn--link:hover,
.dos-btn--error.dos-btn--link.is-hover,
.dos-btn--error.dos-btn--link:active,
.dos-btn--error.dos-btn--link.is-press      { --dos-btn-bg: transparent; }

/* --- Disabled -------------------------------------------------------------- */
.dos-btn:disabled, .dos-btn.is-disabled {
  --dos-btn-bg: var(--bg-disabled);
  --dos-btn-fg: var(--text-disabled);
  --dos-btn-border: transparent;
  cursor: not-allowed;
  pointer-events: none;
}
.dos-btn--outline:disabled, .dos-btn--outline.is-disabled { --dos-btn-border: var(--border-disabled); --dos-btn-border-width: 1px; }
.dos-btn--link:disabled,    .dos-btn--link.is-disabled    { --dos-btn-bg: transparent; }

/* --- Loading ---------------------------------------------------------------
   Fixed width so replacing the label causes no layout shift. The loader is
   24px at every size in the source.
   -------------------------------------------------------------------------- */
.dos-btn.is-loading {
  --dos-btn-bg: var(--bg-disabled);
  --dos-btn-border: transparent;
  --dos-btn-border-width: 0px;
  width: var(--dos-btn-loading-width);
  padding-inline: var(--spacing-8);
  cursor: progress;
  pointer-events: none;
}
.dos-btn.is-loading .dos-btn__label,
.dos-btn.is-loading .dos-btn__icon { display: none; }
.dos-btn--link.is-loading      { --dos-btn-bg: transparent; width: 93px; padding: 0; }
.dos-btn--icon-only.is-loading { width: var(--dos-btn-height); padding: 0; }

.dos-btn__loader { display: block; flex: none; width: 24px; height: 24px; animation: dos-btn-spin 800ms linear infinite; }
.dos-btn__loader-track { fill: var(--bg-tertiary); }
.dos-btn__loader-arc   { fill: var(--text-primary); }
@keyframes dos-btn-spin { to { transform: rotate(360deg); } }

/* Expands the pointer target to the 44px minimum without changing the drawn
   size — sm (32px) and md (40px) fall below it. */
.dos-btn--touch::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: max(100%, 44px); height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .dos-btn { transition: none; }
  .dos-btn__loader { animation-duration: 2400ms; }
}