/* SASOMM Subscribe Flow — Shared Brand Tokens */
/* Source of truth: docs/superpowers/specs/2026-05-21-subscribe-flow-extended-design.md */

:root {
  --bg-base: #130827;
  --bg-surface: #180D2C;
  --bg-card: #1F1138;
  --teal: #00D9D9;
  --teal-light: #5EEAD4;
  --purple: #B967FF;
  --purple-light: #D8B4FE;
  --coral: #FF4D6A;
  --coral-light: #FF8FA3;
  --text-primary: #EBDCFF;
  --text-secondary: #A0A0B8;
  --brand-gradient: linear-gradient(135deg, #00D9D9 0%, #B967FF 100%);
  --error-gradient: linear-gradient(135deg, #FF4D6A 0%, #B967FF 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Assistant', sans-serif;
  min-height: 100vh;
}

.heb-display { font-family: 'Rubik', sans-serif; font-weight: 800; letter-spacing: -0.01em; }
.num-display { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -0.02em; }

.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-primary {
  background: var(--brand-gradient);
  color: #fff;
  border: none;
  padding: 14px 20px;
  border-radius: 12px;
  font-family: 'Rubik', sans-serif;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(185, 103, 255, 0.28);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(185, 103, 255, 0.4); }

.btn-ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-primary);
  padding: 14px 20px;
  border-radius: 12px;
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-ghost:hover { border-color: rgba(0,217,217,0.3); }

.form-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text-primary);
  font-family: 'Assistant', sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}
.form-input:focus { outline: none; border-color: var(--teal); background: rgba(0,217,217,0.05); }
.form-input.ltr { direction: ltr; text-align: left; }

.form-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-weight: 700;
  font-family: 'Rubik', sans-serif;
}