/* ============================================
   THEME: MarketingGrowth — Deep Teal + Mint
   ============================================ */

:root {
  /* Primary palette */
  --color-bg-primary:       #0A2A2A;
  --color-bg-secondary:     #0F3535;
  --color-bg-card:          #133D3D;
  --color-text-primary:     #F0F5F5;
  --color-text-secondary:   #B0CACA;
  --color-text-muted:       #6A9494;
  --color-accent:           #2DD4A8;
  --color-accent-hover:     #3EE8BA;
  --color-accent-subtle:    rgba(45, 212, 168, 0.10);

  /* Surfaces */
  --color-header-bg:        rgba(10, 42, 42, 0.85);
  --color-header-bg-solid:  rgba(10, 42, 42, 0.95);
  --color-footer-bg:        #071E1E;
  --color-hero-bg:          #0A2A2A;
  --color-section-alt-bg:   #0C3030;

  /* Gradients */
  --gradient-hero:          linear-gradient(160deg, #0A2A2A 0%, #133D3D 40%, #0C3030 100%);
  --gradient-card:          linear-gradient(180deg, #133D3D 0%, #0F3535 100%);

  /* Shadows */
  --shadow-card:            0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-card-hover:      0 8px 40px rgba(45, 212, 168, 0.10);

  /* Typography */
  --font-family-primary:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-heading:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing (8px base) */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* Transitions */
  --transition-fast:    150ms ease;
  --transition-normal:  250ms ease;
  --transition-slow:    400ms ease;

  /* Layout */
  --max-width:       1200px;
  --header-height:   72px;

  /* Hero pattern (subtle dots) */
  --hero-pattern: radial-gradient(circle at 1px 1px, rgba(45, 212, 168, 0.25) 1px, transparent 0);
  background-size: 40px 40px;
}