/* ═════════════════════════════════════════════════════════════════════════
   AIBP Academy — gombkészlet (papír-regiszter)

   Nagy készlet, egy szabállyal: a SZÍN azt mondja meg, mit csinál a gomb,
   vagy melyik pillérbe visz; a SÚLY (telített / papír / link) azt, mennyire
   fontos a képernyőn. A teljes szabálykönyv és a példák:
   ~/.claude/skills/aibp-academy-brand/SKILL.md, 4b. fejezet.

   Szín = szerep
     .btn-yellow   a képernyő fő lépése (kezdés, tovább, beküldés), pillértől függetlenül
     .btn-lila     fiók és leckék (Értsd), a fejléc állandó CTA-ja
     .btn-green    Játszótér, csapat, élő hívás (Próbáld ki)
     .btn-orange   Signal: feliratkozás, olvasás (Maradj képben)
     .btn-ink      rögzítő művelet a tartalmon belül (megjelölöm, beváltom, mentem)
     .btn-paper    másodlagos alternatíva; pillér-keretes változat: .btn-edge-lila/-green/-orange
     .btn-link     harmadlagos navigáció
   Súly
     egy nézetben legfeljebb EGY .btn-yellow; egy gombcsoportban legfeljebb
     egy telített + egy papír + egy link. Két telített gomb csak akkor áll
     egymás mellett, ha két különböző pillérbe visz (pl. árkártyák).
   A chrome-regiszter (Játszótér-app) saját ultramarin gombjai ide NEM tartoznak.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --btn-yellow: #FFE94D;
  --btn-lila: #783FF3;          /* fehér felirattal 5,5:1 */
  --btn-lila-edge: #4b1fb0;
  --btn-green: #00823C;         /* fehér felirattal 4,9:1 */
  --btn-green-edge: #005a29;
  --btn-orange: #C2551A;        /* a #D9621F fehér felirattal csak 3,7:1, ezért a gomb mélyebb */
  --btn-orange-edge: #8a3a0f;
  --btn-ink: #1a1a1a;
  --btn-cream: #FBFAF4;
  --btn-lift: 4px 4px 0 rgba(0,0,0,0.18);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.8rem 1.15rem;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.2;
  color: var(--ink, #1a1a1a);
  background: #ffffff;
  border: 1.5px solid var(--ink, #1a1a1a);
  border-radius: 2px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn .arrow {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 1.35em;
  line-height: 0.8;
}
.btn:focus-visible {
  outline: 2.5px solid var(--accent, #783FF3);
  outline-offset: 3px;
}

/* ── telített gombok: enyhe dőlés, hoverre felemelkedik ── */
.btn-yellow, .btn-lila, .btn-green, .btn-orange, .btn-ink { transform: rotate(-0.5deg); }
.btn-yellow { background: var(--btn-yellow); color: var(--ink, #1a1a1a); }
.btn-lila   { background: var(--btn-lila);   color: #ffffff; border-color: var(--btn-lila-edge); }
.btn-green  { background: var(--btn-green);  color: #ffffff; border-color: var(--btn-green-edge); }
.btn-orange { background: var(--btn-orange); color: #ffffff; border-color: var(--btn-orange-edge); }
.btn-ink    { background: var(--btn-ink);    color: var(--btn-cream); }
.btn-yellow:hover, .btn-lila:hover, .btn-green:hover, .btn-orange:hover, .btn-ink:hover {
  transform: rotate(-0.5deg) translate(-2px, -2px);
  box-shadow: var(--btn-lift);
}
.btn-lila:hover   { box-shadow: 4px 4px 0 rgba(120,63,243,0.30); }
.btn-green:hover  { box-shadow: 4px 4px 0 rgba(0,130,60,0.28); }
.btn-orange:hover { box-shadow: 4px 4px 0 rgba(194,85,26,0.30); }

/* ── papír: másodlagos, egyenes ── */
.btn-paper { background: #ffffff; }
.btn-paper:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0,0,0,0.12); }
/* pillér-keretes papír: a pillér saját szekciójában a másodlagos gomb */
.btn-edge-lila   { background: #ffffff; color: #5d24d0; border-color: var(--btn-lila); }
.btn-edge-green  { background: #ffffff; color: #006e33; border-color: var(--btn-green); }
.btn-edge-orange { background: #ffffff; color: #a94813; border-color: var(--btn-orange); }
.btn-edge-lila:hover   { background: rgba(120,63,243,0.06); transform: translate(-1px, -1px); }
.btn-edge-green:hover  { background: rgba(0,130,60,0.06);   transform: translate(-1px, -1px); }
.btn-edge-orange:hover { background: rgba(194,85,26,0.06);  transform: translate(-1px, -1px); }

/* ── link: harmadlagos ── */
.btn-link {
  background: transparent;
  border-color: transparent;
  padding-inline: 0.15rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.btn-link:hover { color: var(--accent, #783FF3); }

/* ── méretek ── */
.btn-sm { font-size: 0.84rem; padding: 0.5rem 0.8rem; }
.btn-lg { font-size: 1.06rem; padding: 1rem 1.45rem; }
.btn-block { display: flex; width: 100%; }

/* ── állapotok ── */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn.is-done {
  background: rgba(0,130,60,0.08);
  color: #006e33;
  border-color: rgba(0,130,60,0.55);
  transform: none;
  box-shadow: none;
  cursor: default;
}
.btn .spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2.5px solid rgba(0,0,0,0.15);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .label { opacity: 0.5; }
.btn.is-loading .arrow { display: none; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── választó: 2-4 egyenrangú lehetőség (mélység-sáv, szűrő) ── */
.btn-choice-group { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.btn-choice {
  font: 600 0.84rem/1.25 'Inter', system-ui, sans-serif;
  text-align: left;
  padding: 0.55rem 0.65rem 0.5rem;
  background: #ffffff;
  color: var(--ink, #1a1a1a);
  border: 1.5px solid var(--ink, #1a1a1a);
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
}
.btn-choice small {
  display: block;
  font: 500 0.66rem/1.3 'DM Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-choice, #6b6660);
  margin-bottom: 2px;
}
.btn-choice[aria-pressed="true"] { background: var(--btn-yellow); transform: rotate(-0.5deg); }
.btn-choice:focus-visible { outline: 2.5px solid var(--accent, #783FF3); outline-offset: 2px; }
@media (max-width: 420px) { .btn-choice-group { grid-auto-flow: row; } }

/* ── chip: kis javaslat-gomb (előre megírt kérdés, címke-szűrő) ── */
.btn-chip {
  display: inline-flex; align-items: center; gap: 0.35em;
  font: 500 0.82rem/1.2 'Inter', system-ui, sans-serif;
  padding: 0.42rem 0.7rem;
  background: #ffffff;
  color: var(--ink, #1a1a1a);
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
}
.btn-chip:hover { border-color: var(--ink, #1a1a1a); }

/* ── sötét háttéren (záró CTA-szekció) ── */
.on-dark .btn-paper, .on-dark .btn-link { background: transparent; color: var(--btn-cream); border-color: rgba(251,250,244,0.6); }
.on-dark .btn-link { border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-choice { transition: none; }
  .btn-yellow:hover, .btn-lila:hover, .btn-green:hover, .btn-orange:hover, .btn-ink:hover { transform: rotate(-0.5deg); }
}