/* ==========================================================================
   Button Component
   Three types × four states (default, hover, focus-visible, disabled).
   All visual values come from tokens.css — no hardcoded hex.
   Reference: docs/source/design-glavnaya/index.html lines 605–624.
   ========================================================================== */

/* ---- Base ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* Typography */
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;

  /* Shape — transparent border reserves 1.5px space in all types so box model is consistent */
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  padding: 16px 28px;

  /* Touch target: min-height keeps ≥ 44 px even with font scaling */
  min-height: 44px;

  cursor: pointer;
  text-decoration: none;

  /* Transition covers bg, color, border-color, box-shadow, transform */
  transition: background-color 200ms cubic-bezier(.2, .7, .2, 1),
              color 200ms cubic-bezier(.2, .7, .2, 1),
              border-color 200ms cubic-bezier(.2, .7, .2, 1),
              box-shadow 200ms cubic-bezier(.2, .7, .2, 1),
              transform 200ms cubic-bezier(.2, .7, .2, 1),
              opacity 200ms cubic-bezier(.2, .7, .2, 1);
}

/* Micro-press (skip when disabled — selector specificity handled below) */
.btn:not([disabled]):not(.is-disabled):active {
  transform: scale(0.98);
}

/* ---- Focus-visible ring (keyboard only, not on mouse click) ---- */
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Disabled state (both native attribute and utility class) ----
   Note: .is-disabled is intentionally omitted from <a> tags — anchors
   cannot be semantically disabled. Use <button disabled> for disabled controls. */
.btn[disabled],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   .btn-primary — solid accent fill
   ========================================================================== */
.btn-primary {
  background-color: var(--accent);
  color: var(--ink-light);  /* white text — reusing --ink-light (#FFFFFF) */
}

@media (hover: hover) {
  .btn-primary:not([disabled]):not(.is-disabled):hover {
    background-color: var(--accent-hover);
    box-shadow: 0 4px 20px var(--accent-soft);
  }
}

/* Stronger focus ring contrast over accent bg */
.btn-primary:focus-visible {
  outline: 2px solid var(--ink-light);
  outline-offset: 2px;
}

/* ==========================================================================
   .btn-secondary — transparent bg, border, accent on hover
   Maps from reference .btn-outline.
   Default: transparent bg + --line border + --ink text.
   Hover:   border-color and text switch to --accent (per reference Decision 1).
   ========================================================================== */
.btn-secondary {
  background-color: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}

@media (hover: hover) {
  .btn-secondary:not([disabled]):not(.is-disabled):hover {
    border-color: var(--accent);
    color: var(--accent);
    background-color: var(--accent-soft);
  }
}

/* ==========================================================================
   .btn-tertiary — text-only, no background, no border
   Maps from reference .btn-link.
   ========================================================================== */
.btn-tertiary {
  background-color: transparent;
  color: var(--accent);
  border: 1.5px solid transparent;

  /* No horizontal padding for pure text link, keep vertical for touch target */
  padding-left: 0;
  padding-right: 0;

  /* Ensure touch target height even with no explicit height */
  min-height: 44px;
}

@media (hover: hover) {
  .btn-tertiary:not([disabled]):not(.is-disabled):hover {
    text-decoration: underline;
  }
}