/* SO UI Kit — shared design system (no build) */

:root{
  --so-radius-sm: 12px;
  --so-radius-md: 16px;
  --so-radius-lg: 22px;
  --so-shadow-sm: 0 8px 24px rgba(0,0,0,.10);
  --so-shadow-md: 0 18px 60px rgba(0,0,0,.16);
  --so-border: rgba(17,24,39,.12);
  --so-muted: rgba(17,24,39,.70);
  --so-bg-soft: rgba(17,24,39,.04);
  --so-focus: rgba(0,0,0,.22);
}

/* Buttons */
.cta-button,
.so-btn{
  -webkit-tap-highlight-color: transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-weight:800;
  letter-spacing:.01em;
  border-radius: var(--so-radius-md);
  padding: .95rem 1.25rem;
  line-height: 1;
  border: 1px solid rgba(0,0,0,.14);
  background: var(--accent-color, #111);
  color: #fff;
  box-shadow: var(--so-shadow-sm);
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cta-button:hover,
.so-btn:hover{ transform: translateY(-1px); box-shadow: var(--so-shadow-md); }
.cta-button:active,
.so-btn:active{ transform: translateY(0); box-shadow: var(--so-shadow-sm); }
.cta-button:focus-visible,
.so-btn:focus-visible{ outline: 3px solid var(--so-focus); outline-offset: 3px; }

/* Secondary */
.so-btn--ghost{
  background: transparent;
  color: #111;
  border: 1px solid var(--so-border);
  box-shadow: none;
}
.so-btn--ghost:hover{ background: rgba(0,0,0,.04); box-shadow:none; }

/* Inputs */
.form-input,
.so-input{
  width:100%;
  border-radius: var(--so-radius-sm);
  border: 1px solid var(--so-border);
  background: var(--so-bg-soft);
  color: #111;
  padding: .85rem 1rem;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form-input::placeholder,
.so-input::placeholder{ color: rgba(17,24,39,.45); }
.form-input:focus,
.so-input:focus{ outline:none; border-color: rgba(0,0,0,.28); box-shadow: 0 0 0 4px rgba(0,0,0,.10); background: rgba(17,24,39,.03); }

/* Cards */
.so-card{
  border-radius: var(--so-radius-lg);
  border: 1px solid var(--so-border);
  background: #fff;
  box-shadow: var(--so-shadow-sm);
}

/* Badges */
.so-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--so-border);
  background: rgba(0,0,0,.03);
  font-size: 12px;
  color: rgba(17,24,39,.8);
}

/* Toast */
.so-toast-wrap{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  display:flex;
  flex-direction:column;
  gap: 10px;
  width: min(560px, 92vw);
  pointer-events:none;
}
.so-toast{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: var(--so-radius-md);
  background: rgba(255,255,255,.94);
  border: 1px solid var(--so-border);
  box-shadow: var(--so-shadow-md);
  backdrop-filter: blur(10px);
  animation: soToastIn .22s ease both;
}
.so-toast__logo{ width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: #fff; border:1px solid rgba(0,0,0,.08); }
.so-toast__title{ font-weight: 900; color:#111; margin:0; font-size: 14px; }
.so-toast__msg{ margin:0; color: rgba(17,24,39,.75); font-size: 13px; line-height: 1.25; }
.so-toast__dot{ width:10px; height:10px; border-radius:999px; flex:0 0 auto; }
.so-toast__close{ margin-left:auto; background: transparent; border:none; cursor:pointer; padding:6px; border-radius:10px; color: rgba(17,24,39,.55); }
.so-toast__close:hover{ background: rgba(0,0,0,.05); color: rgba(17,24,39,.85); }

.so-dot--success{ background: #16a34a; }
.so-dot--error{ background: #dc2626; }
.so-dot--warn{ background: #f59e0b; }

@keyframes soToastIn{ from{ opacity:0; transform: translateY(-8px) } to{ opacity:1; transform: translateY(0) } }

/* Sticky CTA buttons (if present) */
.so-sticky-cta{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99998;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.so-sticky-cta a{
  border-radius: 999px;
  padding: 12px 14px;
  box-shadow: var(--so-shadow-md);
}