/* ==========================================================================
   Memberius — Buttons
   --------------------------------------------------------------------------
   Unified button system per handoff_buttons/HANDOFF.md.
   Standardni: primary (pill, indigo glow), secondary (solid ink),
              tertiary (outline), ghost (text), danger (raspberry)
   Veličine:   sm (7×12 / 13px), default (10×18 / 14px), lg (14×24 / 15px)
   Specijalni: chip, back, tenant-cta, cat-cta, theme-toggle, inverse

   Loads AFTER design-tokens.css and main theme stylesheet.
   Depends on tokens: --primary-*, --ink-*, --paper, --paper-2, --danger-*,
                       --secondary-*, --radius-md, --radius-sm, --radius-pill,
                       --font-body, --font-mono.
   ========================================================================== */

/* ========================================================
   1 · BASE
   ======================================================== */
.memberius-btn {
  appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s, transform .06s, box-shadow .12s, border-color .12s;
}
.memberius-btn:active { transform: translateY(0.5px); }
.memberius-btn:disabled,
.memberius-btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ========================================================
   2 · VARIANTS
   ======================================================== */

/* Primary — pill, indigo glow (editorial CTA) */
.memberius-btn-primary {
  background: var(--primary-500);
  color: #FFFFFF;
  border-color: var(--primary-500);
  border-radius: var(--radius-pill);
  padding-left: 22px;
  padding-right: 22px;
  box-shadow: 0 8px 22px -8px rgba(61, 82, 160, .55);
}
.memberius-btn-primary:hover {
  background: var(--primary-700);
  border-color: var(--primary-700);
  color: #FFFFFF;
}
.memberius-btn-primary:focus,
.memberius-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 8px 22px -8px rgba(61, 82, 160, .55), 0 0 0 3px var(--primary-100);
}

/* Secondary — solid ink, not pill */
.memberius-btn-secondary {
  background: var(--ink-900);
  color: #FFFFFF;
  border-color: var(--ink-900);
}
.memberius-btn-secondary:hover {
  background: var(--ink-700);
  border-color: var(--ink-700);
  color: #FFFFFF;
}
.memberius-btn-secondary:focus,
.memberius-btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ink-100);
}

/* Tertiary — outline */
.memberius-btn-tertiary {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-200);
}
.memberius-btn-tertiary:hover {
  background: var(--paper-2);
  border-color: var(--ink-300);
  color: var(--ink-900);
}
.memberius-btn-tertiary:focus,
.memberius-btn-tertiary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ink-100);
}

/* Ghost — text only, tighter padding */
.memberius-btn-ghost {
  background: transparent;
  color: var(--ink-700);
  border-color: transparent;
  padding: 10px 12px;
}
.memberius-btn-ghost:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}

/* Danger — destructive */
.memberius-btn-danger {
  background: var(--danger-500);
  color: #FFFFFF;
  border-color: var(--danger-500);
}
.memberius-btn-danger:hover {
  background: #8A1A36;
  border-color: #8A1A36;
  color: #FFFFFF;
}

/* Success — affirmative (accept, save) */
.memberius-btn-success {
  background: var(--success-500);
  color: #FFFFFF;
  border-color: var(--success-500);
}
.memberius-btn-success:hover {
  background: #168657;
  border-color: #168657;
  color: #FFFFFF;
}

/* Info — neutral action */
.memberius-btn-info {
  background: var(--info-500);
  color: #FFFFFF;
  border-color: var(--info-500);
}
.memberius-btn-info:hover {
  background: #3B53A8;
  border-color: #3B53A8;
  color: #FFFFFF;
}

/* Inverse — white pill on color/gradient surface (CTA-B) */
.memberius-btn-inverse {
  background: #FFFFFF;
  color: var(--primary-700);
  border-color: #FFFFFF;
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-weight: 600;
}
.memberius-btn-inverse:hover {
  background: var(--secondary-100);
  border-color: var(--secondary-100);
  color: var(--primary-700);
}

/* ========================================================
   3 · SIZES
   ======================================================== */
.memberius-btn-sm {
  padding: 7px 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}
.memberius-btn-lg {
  padding: 14px 24px;
  font-size: 15px;
  border-radius: var(--radius-md);
}
/* Primary stays pill at every size */
.memberius-btn-primary.memberius-btn-sm,
.memberius-btn-primary.memberius-btn-lg,
.memberius-btn-inverse.memberius-btn-sm,
.memberius-btn-inverse.memberius-btn-lg {
  border-radius: var(--radius-pill);
}
/* Sm primary keeps slightly tighter horizontal padding */
.memberius-btn-primary.memberius-btn-sm { padding-left: 14px; padding-right: 14px; }

/* ========================================================
   4 · SPECIAL — Theme toggle (round icon button, header)
   ======================================================== */
.memberius-theme-toggle {
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-200);
  background: transparent;
  color: var(--ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.memberius-theme-toggle:hover {
  background: var(--ink-100);
  color: var(--ink-900);
  border-color: var(--ink-300);
}
.memberius-theme-toggle svg { width: 16px; height: 16px; }
.memberius-theme-toggle-icon-sun  { display: none; }
.memberius-theme-toggle-icon-moon { display: block; }
html[data-theme="dark"] .memberius-theme-toggle-icon-sun  { display: block; }
html[data-theme="dark"] .memberius-theme-toggle-icon-moon { display: none; }

/* ========================================================
   5 · SPECIAL — Filter chip (3-state pill)
   ======================================================== */
.memberius-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-200);
  background: var(--paper);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-700);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.memberius-chip:hover {
  border-color: var(--ink-300);
  color: var(--ink-900);
}
.memberius-chip.on {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
}
.memberius-chip.soon {
  color: var(--ink-300);
  cursor: not-allowed;
}
.memberius-chip.soon:hover {
  border-color: var(--ink-200);
  color: var(--ink-300);
}
.memberius-chip-soon-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-500);
}

/* ========================================================
   6 · SPECIAL — Back link (mono pill, navigation)
   ======================================================== */
.memberius-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-200);
  background: var(--paper);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-700);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.memberius-back:hover {
  background: var(--ink-100);
  border-color: var(--ink-300);
  color: var(--ink-900);
}

/* ========================================================
   7 · SPECIAL — Tenant CTA (accent pill outline)
   --------------------------------------------------------
   Accent color is driven by inline `style="--accent: #..."` per tenant
   category; class falls back to primary if --accent not set.
   ======================================================== */
.memberius-tenant-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in oklab, var(--accent, var(--primary-500)) 35%, transparent);
  background: transparent;
  color: var(--accent, var(--primary-500));
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.memberius-tenant-cta:hover {
  background: color-mix(in oklab, var(--accent, var(--primary-500)) 10%, transparent);
  border-color: var(--accent, var(--primary-500));
}

/* ========================================================
   8 · SPECIAL — Category CTA (inline arrow link)
   ======================================================== */
.memberius-cat-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--accent, var(--primary-500));
  text-decoration: none;
  cursor: pointer;
}
.memberius-cat-cta svg {
  width: 16px;
  height: 16px;
  transition: transform .15s ease;
}
.memberius-cat-cta:hover svg {
  transform: translateX(4px);
}

/* ========================================================
   9 · DARK MODE adjustments for special buttons
   ======================================================== */
html[data-theme="dark"] .memberius-back { background: var(--card); }
html[data-theme="dark"] .memberius-chip { background: var(--card); }
html[data-theme="dark"] .memberius-chip.on {
  background: var(--paper);
  color: var(--ink-900);
  border-color: var(--paper);
}

/* Secondary inverts: --ink-900 is light in dark mode, so use --paper for text */
html[data-theme="dark"] .memberius-btn-secondary {
  color: var(--paper);
}
html[data-theme="dark"] .memberius-btn-secondary:hover {
  color: var(--paper);
}