/*
  GoPy Studio theme for marketing/sandbox website.
*/

:root {
  --bg: #1a1a2e;
  --surface: #16213e;
  --surface-elevated: #1c2942;
  --text: #e8e8e8;
  --text-secondary: #c9ced9;
  --text-muted: #9aa6bf;
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --border: #3a3a5e;
  --radius: 10px;
  --radius-lg: 14px;

  --btn-radius: 16px;
  --btn-text: #ffffff;
  --btn-jelly-blue-top: #6db9f2;
  --btn-jelly-blue-mid: #3498db;
  --btn-jelly-blue-bot: #2980b9;
  --btn-jelly-dark-top: #2f3f63;
  --btn-jelly-dark-mid: #243654;
  --btn-jelly-dark-bot: #1a2740;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.35rem;
  border: none;
  border-radius: var(--btn-radius);
  background: linear-gradient(180deg, var(--btn-jelly-blue-top) 0%, var(--btn-jelly-blue-mid) 40%, var(--btn-jelly-blue-bot) 100%);
  color: var(--btn-text);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(26, 90, 138, 0.35);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.03);
  filter: brightness(1.05);
}

.btn-primary {
  background: linear-gradient(180deg, var(--btn-jelly-blue-top) 0%, var(--btn-jelly-blue-mid) 40%, var(--btn-jelly-blue-bot) 100%);
  color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(26, 90, 138, 0.45);
}

.btn-secondary {
  background: linear-gradient(180deg, var(--btn-jelly-dark-top) 0%, var(--btn-jelly-dark-mid) 40%, var(--btn-jelly-dark-bot) 100%);
  color: #dbe7ff;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.18), inset 0 -3px 6px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.35);
}