/* =========================================================================
   TIER 3 — COMPONENT TOKENS
   For v1, BUTTONS are the only component that earns a tier 3 token layer.
   Everything else consumes tier 2 directly. If another component genuinely
   needs component-specific tokens, add them here deliberately.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     Button — primary (filled, sun-orange)
     ----------------------------------------------------------------------- */

  --button-color-background-default: var(--theme-color-brand-primary);
  --button-color-background-hover: var(--theme-color-brand-emphasis);
  --button-color-background-active: var(--theme-color-accent-warning);
  --button-color-background-disabled: var(--theme-color-background-subtle);

  --button-color-text-default: var(--theme-color-text-heading);
  --button-color-text-hover: var(--theme-color-text-inverse);
  --button-color-text-disabled: var(--theme-color-text-muted);

  --button-color-border-default: transparent;
  --button-color-border-focus: var(--theme-color-border-focus);

  --button-font-family: var(--theme-font-family-body);
  --button-font-size: var(--theme-font-size-body);
  --button-font-weight: var(--theme-font-weight-emphasis);
  --button-letter-spacing: var(--theme-letter-spacing-eyebrow);

  --button-space-inline: var(--theme-space-inline-lg);
  --button-space-block: var(--theme-space-stack-xs);
  --button-radius: var(--theme-radius-pill);
  --button-shadow: var(--theme-shadow-card);
  --button-shadow-hover: var(--theme-shadow-lifted);

  /* -----------------------------------------------------------------------
     Button — secondary (outline / quiet variant)
     ----------------------------------------------------------------------- */

  --button-secondary-color-background-default: transparent;
  --button-secondary-color-background-hover: var(--theme-color-background-subtle);
  --button-secondary-color-text-default: var(--theme-color-text-default);
  --button-secondary-color-text-hover: var(--theme-color-text-heading);
  --button-secondary-color-border-default: var(--theme-color-border-strong);
  --button-secondary-color-border-hover: var(--theme-color-brand-secondary);
}