/* ============================================
   THEME: Meridian Wealth Advisors
   Modern Indigo — forward-thinking, clarity

   Brand Identity:
   - Primary: Deep Indigo (#4f46e5)
   - Secondary: Dark slate (#0f172a)
   - Accent: Cyan (#06b6d4)
   - Premium dark surfaces, tech-forward
   ============================================ */

:root {
  /* --- Brand Colors --- */
  --color-primary:        #6366f1;
  --color-primary-light:  #818cf8;
  --color-primary-dark:   #4f46e5;
  --color-secondary:      #0f172a;
  --color-secondary-light:#1e293b;
  --color-accent:         #06b6d4;
  --color-accent-light:   #22d3ee;

  /* --- Surfaces --- */
  --color-bg:             #030712;
  --color-surface:        #0f172a;
  --color-surface-light:  #1e293b;
  --color-border:         rgba(255, 255, 255, 0.10);

  /* --- Text --- */
  --color-text:           #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted:     #64748b;

  /* --- Typography --- */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type Scale */
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.5rem;
  --text-5xl:   3.25rem;
  --text-6xl:   4.5rem;

  /* --- Spacing / Layout --- */
  --container-max:        1200px;
  --container-padding:    2rem;
  --section-padding:      6rem;
  --grid-gap:             2rem;

  /* --- Borders --- */
  --radius:     4px;
  --radius-lg:  8px;
}

@media (max-width: 1024px) {
  :root {
    --text-6xl:  3.5rem;
    --text-5xl:  2.75rem;
    --text-4xl:  2rem;
    --section-padding: 4.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --text-6xl:  2.5rem;
    --text-5xl:  2rem;
    --text-4xl:  1.75rem;
    --text-3xl:  1.5rem;
    --container-padding: 1.25rem;
    --section-padding: 3.5rem;
    --grid-gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  :root {
    --text-6xl:  2rem;
    --text-5xl:  1.75rem;
    --container-padding: 1rem;
    --section-padding: 3rem;
  }
}

/* =============================================
   CLIENT-SPECIFIC STYLES
   ============================================= */

.highlight {
  color: var(--color-accent);
}

.divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  margin-bottom: 1.5rem;
  border-radius: 3px;
}

.divider--center {
  margin-left: auto;
  margin-right: auto;
}

.img-placeholder {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero__bg .img-placeholder {
  background: linear-gradient(135deg, #030712 0%, #0f172a 30%, #1a1145 50%, #0f172a 70%, #030712 100%) !important;
}

.hero__overlay {
  background: linear-gradient(135deg,
    rgba(3, 7, 18, 0.90) 0%,
    rgba(3, 7, 18, 0.60) 50%,
    rgba(3, 7, 18, 0.80) 100%
  ) !important;
}

.page-banner {
  background: linear-gradient(135deg, #030712 0%, #0f172a 30%, #1a1145 50%, #0f172a 70%, #030712 100%) !important;
}

.section--accent input::placeholder,
.section--accent textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.section--accent input,
.section--accent textarea,
.section--accent select {
  color: #fff;
}

.stat__number {
  color: var(--color-accent);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-accent);
}

/* Labels should be bright enough to read */
.label {
  color: var(--color-accent);
}