:root {
  /* --- Colors --- */
  
  /* Brand Colors (Live Website) */
  --brand-teal: #00B9D0;
  --brand-teal-dark: #007D8C;
  --brand-blue-deep: #003388;

  /* Background Colors */
  --bg-hero-start: #9EEAD5;
  --bg-hero-end: #D3F3C1;
  --bg-hero-gradient: linear-gradient(135deg, var(--bg-hero-start), var(--bg-hero-end));
  
  --bg-section-white: #FFFFFF;
  --bg-section-light: #F4F7F6;

  /* Typography Colors */
  --text-primary: #0F0C20;    /* Dark Slate Navy */
  --text-secondary: #5A6573;  /* Secondary Accent */
  --text-muted: #666666;      /* Subtext */

  /* Interactive Elements */
  --color-cta: #38D2FE;       /* Vibrant Sky Blue */
  --color-cta-text-dark: #0F0C20;
  --color-cta-text-light: #FFFFFF;
  
  /* --- Utility Styles --- */
  
  /* CSS Grid Overlay Pattern for Hero Section */
  --grid-overlay-image: 
    linear-gradient(to right, rgba(15, 12, 32, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 12, 32, 0.04) 1px, transparent 1px);
  --grid-overlay-size: 40px 40px;
}

/* Example Classes for Easy Application */

.hero-section {
  background-image: var(--grid-overlay-image), var(--bg-hero-gradient);
  background-size: var(--grid-overlay-size), 100% 100%;
  color: var(--text-primary);
  padding: 80px 24px;
}

.body-section-white {
  background-color: var(--bg-section-white);
  color: var(--text-primary);
  padding: 60px 24px;
}

.body-section-light {
  background-color: var(--bg-section-light);
  color: var(--text-primary);
  padding: 60px 24px;
}

.title-primary {
  color: var(--text-primary);
  font-family: inherit;
}

.accent-secondary {
  color: var(--text-secondary);
}

.btn-cta {
  background-color: var(--color-cta);
  color: var(--color-cta-text-dark);
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.btn-cta:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(56, 210, 254, 0.25);
  transform: translateY(-1px);
}

.btn-cta-secondary {
  background-color: var(--bg-section-white);
  color: var(--text-primary);
  border: 1px solid var(--text-secondary);
  border-radius: 6px;
  padding: 12px 24px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.btn-cta-secondary:hover {
  background-color: var(--bg-section-light);
  transform: translateY(-1px);
}

.brand-teal-text {
  color: var(--brand-teal);
}

.brand-teal-bg {
  background-color: var(--brand-teal);
}