/* ============================================================
   COMPONENTS — atomic, reusable.
   .btn, .card, .pill, .modal — composable via modifier classes.
   ============================================================ */

/* ----- Button ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base),
              transform var(--t-base), box-shadow var(--t-base),
              border-color var(--t-base);
  white-space: nowrap;
}

.btn svg {
  width: 18px; height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-blue);
}
.btn-primary:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue-hover);
}

/* .btn-dark — always dark with white text regardless of theme.
   Uses fixed colors so it stays "App Store-style" in both light and dark modes. */
.btn-dark {
  background: #111418;
  color: #ffffff;
}
.btn-dark:hover {
  background: #000000;
  transform: translateY(-1px);
}
@media (prefers-color-scheme: dark) {
  /* In dark mode, give it a subtle border so it doesn't blend with the dark surface. */
  .btn-dark { border: 1px solid rgba(255, 255, 255, 0.1); }
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* Sizes */
.btn-sm  { padding: 11px 22px; font-size: var(--text-base); gap: 8px; }
.btn-sm svg { width: 16px; height: 16px; }
.btn-lg  { padding: 18px 40px; font-size: var(--text-md); box-shadow: var(--shadow-blue-lg); }
.btn-lg.btn-primary:hover { box-shadow: var(--shadow-blue-lg-hover); }

/* Icon-only or footer-style app button (keeps secondary visual weight) */
.btn-app {
  padding: 12px 22px;
  font-size: var(--text-sm);
  gap: 8px;
}
.btn-app svg { width: 16px; height: 16px; }

/* ----- Pill / Badge ------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
}

.pill-primary {
  background: var(--blue);
  color: var(--white);
}

.pill-soft {
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: var(--text-xs);
  padding: 6px 16px;
}

.pill-glass {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  padding: 8px 16px;
  font-size: var(--text-sm);
}

.pill-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--slate);
  cursor: pointer;
  padding: 8px 16px;
  font-size: var(--text-sm);
  transition: border-color var(--t-base), color var(--t-base);
}
.pill-outline:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.pill-dot::before {
  content: '';
  width: 7px; height: 7px;
  background: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
  /* invert color when on solid pill */
}
.pill-primary.pill-dot::before { background: var(--white); }
.pill-soft.pill-dot::before    { background: var(--blue); width: 6px; height: 6px; }

.pill svg { width: 14px; height: 14px; }

/* ----- Card -------------------------------------------------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-lg { border-radius: var(--radius-lg); }

.card-soft {
  background: var(--bg-tinted);
  border-color: var(--border-tinted);
}

.card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--border);
  overflow: hidden;
}
.card-image-wide { aspect-ratio: 16 / 9; }
.card-image img,
.card-image video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.card-body {
  padding: 18px 16px 22px;
  text-align: left;
}

/* ----- Modal ------------------------------------------------- */
.modal {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 20px;
}
.modal.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background: var(--bg-card);
  width: 100%;
  max-width: 380px;
  border-radius: 20px;
  padding: 26px;
  box-shadow: var(--shadow-modal);
  transform: translateY(16px);
  transition: transform var(--t-slow) var(--t-ease);
}
.modal.open .modal-card { transform: translateY(0); }

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.modal-head h3 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.4px;
}

.modal-close {
  width: 32px; height: 32px;
  background: var(--bg-soft);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate);
  transition: background var(--t-fast);
}
.modal-close:hover { background: var(--border); }
.modal-close svg { width: 14px; height: 14px; fill: currentColor; }

/* ----- Heading utilities ------------------------------------- */
.heading {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.heading-1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.05; letter-spacing: -2px; }
.heading-2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.2;  letter-spacing: -0.8px; }
.heading-3 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -1px; }

.accent { color: var(--blue); }