/* ═══════════════════════════════════════════
   Theme Override CSS
   Copy this file and customize the variables
   to rebrand the sign-up flow for your app.
═══════════════════════════════════════════ */

/*
  USAGE:
  1. Copy this file to your project
  2. Modify the CSS variables below
  3. Link it AFTER proprofile.css:
     <link rel="stylesheet" href="theme-override.css">
*/

:root {
  /* ── Core Colors ── */
  /* Uncomment and modify to override ProProfile colors */
  
  /* --bg: #0F0F1A; */
  /* --bg-card: #161625; */
  /* --bg-input: rgba(255,255,255,0.05); */
  
  /* --text: #E5E7EB; */
  /* --text-strong: #ffffff; */
  /* --text-muted: rgba(255,255,255,0.55); */
  /* --text-dim: rgba(255,255,255,0.38); */
  
  /* --blue: #4F6EF7; */
  /* --blue-soft: #818CF8; */
  /* --green: #22C9A5; */
  /* --amber: #F59E0B; */
  /* --red: #F87171; */
  /* --violet: #A78BFA; */
  
  /* ── Page-Specific Overrides ── */
  /* These allow granular control over specific elements */
  
  /* Phone entry page (1-phone.html) */
  /* --auth-pitch-eyebrow-color: var(--blue-soft); */
  /* --auth-pitch-title-color: white; */
  /* --auth-pitch-sub-color: var(--text-muted); */
  /* --auth-bullet-color: var(--text-muted); */
  /* --auth-bullet-highlight: white; */
  /* --auth-bullet-icon-bg: var(--blue-bg); */
  /* --auth-bullet-icon-border: var(--blue-border); */
  /* --auth-bullet-icon-color: var(--blue-soft); */
  
  /* --why-phone-bg: rgba(79,110,247,0.06); */
  /* --why-phone-border: var(--blue-border); */
  /* --why-phone-text: rgba(255,255,255,0.7); */
  /* --why-phone-icon: var(--blue); */
  /* --why-phone-highlight: white; */
  
  /* --privacy-text-color: var(--text-dim); */
  
  /* Verify phone page (2-verify-phone.html) */
  /* --verify-icon-bg: var(--blue-bg); */
  /* --verify-icon-border: var(--blue-border); */
  /* --verify-icon-color: var(--blue-soft); */
  /* --verify-title-color: white; */
  /* --verify-sub-color: var(--text-muted); */
  /* --verify-target-color: white; */
  
  /* --otp-cell-bg: var(--bg-input); */
  /* --otp-cell-border: var(--border-strong); */
  /* --otp-cell-color: white; */
  /* --otp-cell-focus-border: var(--blue); */
  /* --otp-cell-focus-bg: rgba(79,110,247,0.08); */
  /* --otp-cell-focus-shadow: rgba(79,110,247,0.15); */
  /* --otp-cell-filled-border: rgba(79,110,247,0.4); */
  /* --otp-cell-filled-color: white; */
  /* --otp-cell-error-border: var(--red); */
  /* --otp-cell-error-bg: var(--red-bg); */
  
  /* --resend-text-color: var(--text-dim); */
  /* --countdown-color: var(--text-muted); */
  
  /* Choose auth page (3-choose-auth.html) */
  /* --oauth-btn-bg: var(--bg-input); */
  /* --oauth-btn-border: var(--border-strong); */
  /* --oauth-btn-color: white; */
  /* --oauth-btn-hover-bg: rgba(255,255,255,0.08); */
  /* --oauth-btn-hover-border: rgba(255,255,255,0.2); */
  
  /* --info-note-bg: rgba(167,139,250,0.06); */
  /* --info-note-border: var(--violet-border); */
  /* --info-note-text: var(--violet); */
  /* --info-note-dot: var(--violet); */
  /* --info-note-strong: white; */
  
  /* --password-strength-color: var(--text-dim); */
  
  /* Error/success messages (all pages) */
  /* --error-bg: var(--red-bg); */
  /* --error-border: var(--red-border); */
  /* --error-text: var(--red); */
  
  /* --success-bg: var(--green-bg); */
  /* --success-border: var(--green-border); */
  /* --success-text: var(--green); */
}

/* ── Logo Override ── */
/* Change the logo text/styling */
/*
.shell-logo {
  font-size: 14px;
  font-weight: 700;
  color: white;
  letter-spacing: 1px;
}
.shell-logo span {
  color: var(--blue);
}
*/

/* ── Typography Override ── */
/* Change fonts for the entire flow */
/*
body {
  font-family: 'Your-Font', -apple-system, BlinkMacSystemFont, sans-serif;
}
*/

/* ── Button Style Override ── */
/* Customize primary button appearance */
/*
.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #5568d3 0%, #63408a 100%);
}
*/

/* ── Example: Light Theme ── */
/* Uncomment to switch to a light theme */
/*
:root {
  --bg: #FFFFFF;
  --bg-card: #F7F8FC;
  --bg-input: #FFFFFF;
  
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.12);
  
  --text: #1A1A2E;
  --text-strong: #000000;
  --text-muted: rgba(0,0,0,0.6);
  --text-dim: rgba(0,0,0,0.45);
  
  --blue: #4F6EF7;
  --blue-soft: #4F6EF7;
  --blue-bg: rgba(79,110,247,0.08);
  --blue-border: rgba(79,110,247,0.2);
}

.stage-glow,
.stage-glow2 {
  display: none;
}
*/

/* ── Example: Custom Brand Colors ── */
/* Uncomment and modify for your brand */
/*
:root {
  --blue: #FF6B6B;
  --blue-soft: #FF8787;
  --blue-bg: rgba(255,107,107,0.12);
  --blue-border: rgba(255,107,107,0.3);
  
  --green: #51CF66;
  --green-soft: #69DB7C;
  --green-bg: rgba(81,207,102,0.12);
  --green-border: rgba(81,207,102,0.3);
}
*/