:root {
  --primaryColor: #2DD4BF;
  /* Muted teal */
  --secondaryColor: #374151;
  /* Soft charcoal */
  --tertiaryColor: #1F2937;
  --light: #F9FAFB;
  --dark: #111827;

  /* Fonts */
  --font-primary: 'Source Sans Pro', sans-serif;

  /* Colors */
  --color-primary: #4a5a6a;
  /* muted slate blue */
  --color-primary-dark: #3a4652;
  --color-secondary: #f5f5f7;
  /* very light grey background */
  --color-secondary-light: #9ca3af;
  /* cool grey */
  --color-secondary-lighter: rgb(224, 224, 224);
  --color-secondary-lightest: #e5e7eb;
  --color-accent: #bfa46f;
  /* soft warm gold */
  --color-accent-dark: #a68d53;
  --color-accent-light: #d9c993;
  /* light gold */
  --color-light: #ffffff;
  /* white background */
  --color-text-primary: #2f3a47;
  /* dark slate text */
  --color-text-light: rgb(226, 226, 226);
  /* medium grey text */
  --color-main: var(--color-primary);
  --color-main-lighter: #728499cc;
  /* muted lighter blue */
  --color-cyan: #728499;
  /* replacing cyan with muted blue */
  --color-cyan-light: #a1adc1;
  /* lighter muted blue */

  /* Shadows & Effects - subtle, no glow */
  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-strong: rgba(0, 0, 0, 0.15);
  --shadow-hero: rgba(0, 0, 0, 0.12);
  --shadow-cyan: rgba(114, 132, 153, 0.3);
  --shadow-cyan-light: rgba(161, 173, 193, 0.2);

  /* Spacing */
  --spacing-page-padding: 2rem;
  --spacing-section-padding: 4rem;

  /* Border Radius */
  --radius-default: 1rem;
  --radius-btn: 8px;
  --radius-pill: 50px;
}

.hero-area {
  background: #000 !important;
}

.hero-text, .hero-content p, .hero-contact, .hero-contact a, .btn--white {
  color: var(--primaryColor) !important;
}

.btn--white {
  border: 2px solid var(--primaryColor) !important;
}