/* Vocally Light Theme - Soft Professional Palette */
/* Optimized for service businesses (wellness, hospitality, consulting) */

:root {
  /* Brand Accent Colors */
  --navy: #0E1A45;              /* Professional navy for headers */
  --coral: #D87A53;             /* Warm coral for CTAs */
  --butter: #FFF6CC;            /* Soft butter highlights */
  --forest: #2F5E1A;            /* Success states */
  --azure: #2A4F9C;             /* Link blue */
  --peach: #F3B399;             /* Soft hover states */
  
  /* Base & Background Colors */
  --bg-main: #F8FAFC;           /* Soft white background */
  --bg-accent: #EEF1F5;         /* Light gray sections */
  --surface: #FFFFFF;           /* Pure white cards */
  --border-subtle: #D8DEE7;     /* Subtle borders */
  
  /* Typography Colors */
  --text-primary: #1B1E27;      /* Dark text for readability */
  --text-muted: #606775;        /* Gray secondary text */
  --text-accent: #C76745;       /* Accent text color */
  
  /* Key Gradients */
  --gradient-primary: linear-gradient(90deg, #D87A53 0%, #FFF6CC 100%);
  --gradient-secondary: linear-gradient(90deg, #0E1A45 0%, #2A4F9C 100%);
  --gradient-accent: linear-gradient(90deg, #D87A53 0%, #F3B399 100%);
  --primary-gradient: linear-gradient(135deg, var(--coral) 0%, var(--butter) 100%);
  --secondary-gradient: linear-gradient(135deg, var(--navy) 0%, var(--azure) 100%);
  --accent-gradient: linear-gradient(135deg, var(--coral) 0%, var(--peach) 100%);
  
  /* Icon Box Gradients */
  --gradient-blue-purple: linear-gradient(135deg, var(--azure), var(--coral));
  --gradient-purple-pink: linear-gradient(135deg, var(--coral), var(--peach));
  --gradient-green-blue: linear-gradient(135deg, var(--forest), var(--azure));
  --gradient-cyan-green: linear-gradient(135deg, var(--azure), var(--butter));
  --gradient-orange-red: linear-gradient(135deg, var(--coral), var(--butter));
  --gradient-pink-purple: linear-gradient(135deg, var(--peach), var(--coral));
  --gradient-yellow-orange: linear-gradient(135deg, var(--butter), var(--coral));
  --gradient-teal-cyan: linear-gradient(135deg, var(--azure), var(--butter));
  --gradient-purple-blue: linear-gradient(135deg, var(--navy), var(--azure));
  
  /* Additional helpers */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(14, 26, 69, 0.15);
  --text-secondary: var(--text-muted);
  --text-tertiary: var(--text-muted);
  --backdrop-blur: 20px;
  --success: #2F5E1A;
  --link-hover: #2A4F9C;
  --tag-muted: #A8D5A0;
  --charcoal: #1B1E27;          /* For dark elements on light theme */
  
  /* Layout */
  --nav-h: 140px;               /* Navbar height */
}

/* Light Theme Specific Overrides ONLY */

/* Language Switcher */
.lang-btn {
  color: #606775;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.lang-btn.active {
  background: var(--coral);
  color: white;
  font-weight: 600;
}

.lang-btn:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(168, 213, 160, 0.3);
}

/* Billing Toggle Badge */
.billing-save-badge {
  background-color: #A8D5A0 !important; /* Light green for visibility */
  color: var(--navy) !important;
  font-weight: 600;
}
/* === Signup Form Enhancements === */

/* Form container */
.signup-form {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(14, 26, 69, 0.05);
  padding: 2.5rem;
  max-width: 600px;
  margin: 3rem auto;
}

/* Headline */
.signup-form h1,
.signup-form h2 {
  color: var(--text-primary);
  font-size: 1.875rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 2rem;
}

/* Labels */
.signup-form label {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

/* Inputs & selects */
.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  background-color: var(--surface);
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.signup-form input:focus,
.signup-form select:focus {
  border-color: var(--coral);
  outline: none;
  box-shadow: 0 0 0 3px rgba(216, 122, 83, 0.2);
}

/* Toggle section (Language Add-on) */
.signup-form .toggle-section {
  background: var(--bg-accent);
  padding: 1rem;
  border-radius: 0.75rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 1.5rem;
}

/* Checkbox & links */
.signup-form .terms {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.signup-form .terms a {
  color: var(--azure);
  text-decoration: none;
}

.signup-form .terms a:hover {
  color: var(--coral);
  text-decoration: underline;
}

/* Submit button */
.signup-form button {
  display: block;
  width: 100%;
  background: var(--gradient-accent);
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.9rem 1rem;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  margin-top: 2rem;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.signup-form button:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

.signup-form button:disabled {
  background: var(--bg-accent);
  color: var(--text-muted);
  cursor: not-allowed;
}