/* StreakPass base — typography, body, forms, focus. */
html, body { overflow-x: hidden; max-width: 100%; }

body {
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: var(--sp-font-family);
  font-size: var(--sp-fs-body);
  line-height: var(--sp-lh-normal);
}

h1, h2, h3, h4 { line-height: var(--sp-lh-tight); font-weight: var(--sp-fw-extrabold); letter-spacing: -0.02em; }
h1 { font-size: var(--sp-fs-h1); }
h2 { font-size: var(--sp-fs-h2); }
h3 { font-size: var(--sp-fs-h3); font-weight: var(--sp-fw-bold); }

a { color: var(--sp-orange); text-decoration: none; }
a:hover { text-decoration: underline; }

small { font-size: var(--sp-fs-caption); }

::selection { background: rgba(255, 122, 0, 0.4); }

/* Focus: high-visibility amber ring, keyboard only. */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--sp-focus-ring);
  border-radius: var(--sp-radius-sm);
}

/* Forms */
label {
  display: block;
  font-size: var(--sp-fs-sm);
  font-weight: var(--sp-fw-semibold);
  margin-bottom: var(--sp-space-2);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%;
  height: var(--sp-h-input);
  padding: 0 var(--sp-space-4);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  color: var(--sp-text);
  transition: border-color var(--sp-speed-fast) var(--sp-ease), box-shadow var(--sp-speed-fast) var(--sp-ease);
}
textarea { height: auto; padding: var(--sp-space-3) var(--sp-space-4); }

input::placeholder, textarea::placeholder { color: var(--sp-text-subtle); }

input:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.22); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--sp-border-accent);
  box-shadow: var(--sp-glow-orange);
}
input:disabled, textarea:disabled { opacity: 0.45; cursor: not-allowed; }

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--sp-danger);
}
.sp-field__error {
  display: flex;
  align-items: center;
  gap: var(--sp-space-1);
  margin-top: var(--sp-space-2);
  color: var(--sp-danger);
  font-size: var(--sp-fs-caption);
}
.sp-field__hint {
  margin-top: var(--sp-space-2);
  color: var(--sp-text-subtle);
  font-size: var(--sp-fs-caption);
}

/* Utility text */
.sp-text-muted { color: var(--sp-text-muted); }
.sp-text-subtle { color: var(--sp-text-subtle); }
.sp-text-amber { color: var(--sp-amber); }
.sp-text-success { color: var(--sp-success); }
.sp-text-danger { color: var(--sp-danger); }
.sp-text-center { text-align: center; }

.sp-overline {
  font-size: var(--sp-fs-micro);
  font-weight: var(--sp-fw-semibold);
  letter-spacing: var(--sp-ls-wide);
  text-transform: uppercase;
  color: var(--sp-text-subtle);
}

/* Gradient accent text (second line of hero headlines) */
.sp-accent-text {
  background: var(--sp-gradient-fire-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Screen-reader only */
.sp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}