/*
External Pages Theme for Old School Texting
This file contains styles for public-facing pages (home, pricing, contact, about, etc.)
*/

:root {
  /* Primary Colors */
  --primary-blue: #4a98f7;
  --primary-blue-dark: #3167b3;
  --primary-blue-light: #e3f2fd;
  
  /* Secondary Colors */
  --secondary-gray: #6c757d;
  --secondary-gray-light: #f8f9fa;
  --secondary-gray-dark: #495057;
  
  /* Text Colors */
  --text-primary: #2c3e50;
  --text-secondary: #34495e;
  --text-muted: #7f8c8d;
  
  /* Success/Error Colors */
  --success-green: #27ae60;
  --warning-yellow: #f39c12;
  --error-red: #e74c3c;
  --info-blue: #3498db;
  
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  
  /* Border Colors */
  --border-light: #dee2e6;
  --border-medium: #ced4da;
  --border-dark: #adb5bd;
  
  /* Shadow Colors */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --shadow-dark: rgba(0, 0, 0, 0.2);
}

/* Apply unified colors to common elements */
body {
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}

/* Standard content links - make these blue */
.content a,
p a,
.standard-content a,
.billing-info a,
.pricing-note a {
  color: var(--primary-blue);
}

.content a:hover,
p a:hover,
.standard-content a:hover,
.billing-info a:hover,
.pricing-note a:hover {
  color: var(--primary-blue-dark);
}

/* Button styling for external pages */
.btn-primary, .btn-blue {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.btn-primary:hover, .btn-blue:hover {
  background-color: var(--primary-blue-dark);
  border-color: var(--primary-blue-dark);
}

/* Card styling */
.card, .info-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 4px var(--shadow-light);
}

/* Form styling for external pages */
.form-control:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 0.2rem rgba(74, 152, 247, 0.25);
}

/* Alert styling */
.alert-success {
  background-color: rgba(39, 174, 96, 0.1);
  border-color: var(--success-green);
  color: var(--success-green);
}

.alert-warning {
  background-color: rgba(243, 156, 18, 0.1);
  border-color: var(--warning-yellow);
  color: var(--warning-yellow);
}

.alert-error, .alert-danger {
  background-color: rgba(231, 76, 60, 0.1);
  border-color: var(--error-red);
  color: var(--error-red);
}

.alert-info {
  background-color: rgba(52, 152, 219, 0.1);
  border-color: var(--info-blue);
  color: var(--info-blue);
}

/* Badge styling */
.badge-primary {
  background-color: var(--primary-blue);
}

.badge-success {
  background-color: var(--success-green);
}

.badge-warning {
  background-color: var(--warning-yellow);
}

.badge-danger {
  background-color: var(--error-red);
}

/* Progress bar styling */
.progress-bar {
  background-color: var(--primary-blue);
}

/* Tooltip styling */
.tooltip-inner {
  background-color: var(--text-primary);
}

.tooltip.bs-tooltip-top .arrow::before {
  border-top-color: var(--text-primary);
}

/* Toast notification styling */
.toast {
  background-color: var(--bg-primary);
  border-color: var(--border-light);
}

.toast-header {
  background-color: var(--bg-secondary);
  border-bottom-color: var(--border-light);
}