/* ============================================================
   BTN — pogu sistēma (tikai CSS, bez JS)
   Destilēts no: azrent (bāze + izmēru modifikatori .btn-sm/-lg,
                 style.css r.145+) + letmebehot (--bg/--fg mainīgo
                 hook pieeja UZ PAŠAS .btn — audits atzīmēja par
                 labāko, jo modifikatori pārraksta tikai 2-3
                 mainīgos, nevis cīnās par specifiskumu).
   Pogu RINDAS grupēšanai lieto studijas primitīvu .cluster
   (_studija/css/primitives.css) — šis fails to apzināti nedublē
   (letmebehot .btn-row darīja to pašu, ko .cluster jau dara).
   Krāsas/rādiusi/ēnas TIKAI caur tokens.css mainīgajiem.
   ============================================================ */

.btn {
  /* Lokālie hooki — modifikatori (un vajadzības gadījumā inline
     style="--btn-bg:...") tos pārraksta bez specifiskuma kariem */
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
  --btn-border: transparent;
  --btn-radius: var(--radius-pill); /* taisnstūra pogām instancē: --btn-radius: var(--radius-md) */

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px; /* touch target — bāzes variantam nemazini */
  padding: 0.85em 1.6em;
  border: 2px solid var(--btn-border);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* Hover-lift: TIKAI transform (kompozīcijas slānis) + box-shadow
   (paint īpašība, ne layout) — nekad width/padding/margin, lai
   nešūpotos apkārtējais saturs (skat. README Gotchas). */
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---- Krāsu modifikatori ---- */
.btn--primary {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
}
.btn--primary:hover { --btn-bg: var(--color-accent-hover); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-ink);
  --btn-border: var(--color-line);
  box-shadow: none;
}
.btn--ghost:hover {
  --btn-bg: var(--color-accent-soft);
  --btn-fg: var(--color-accent-hover);
  --btn-border: var(--color-accent);
  box-shadow: none;
}

/* ---- Izmēru modifikatori (azrent .btn-sm/.btn-lg) ---- */
.btn--sm { min-height: 40px; padding: 0.6em 1.15em; font-size: 0.9rem; gap: 0.45em; }
.btn--lg { min-height: 56px; padding: 1.05em 2.1em; font-size: 1.05rem; }

/* ---- Pilna platuma (letmebehot .btn--block) ---- */
.btn--block { width: 100%; }

/* ---- Disabled ---- */
.btn:disabled,
.btn[aria-disabled="true"] {
  --btn-bg: var(--color-line);
  --btn-fg: var(--color-ink-muted);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  transform: none;
}

/* Pašpietiekams drošības tīkls — strādā pat bez reset.css globālā
   noteikuma (skat. wa-float komponenti, tas pats paterns) */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}