/* Springfield Neurofeedback — Design Tokens
   Last updated: 2026-03-19
   Brand colors sourced from existing Squarespace site */

:root {
  /* ── Brand: Teal family ── */
  --color-teal-primary:   #008798;  /* Logo, CTAs, active nav */
  --color-teal-hover:     #008293;  /* Nav hover (existing value) */
  --color-teal-light:     #70CFC2;  /* Hover tints, icon fills */
  --color-teal-wash:      #D4F0ED;  /* Alternating section bg, testimonial band */
  --color-teal-dark:      #006070;  /* Pressed states, footer bg option */

  /* ── Brand: Gold family (waveform / logo accent — reserved) ── */
  --color-gold-primary:   #C49A3A;  /* Secondary CTA border, future logo accent */
  --color-gold-light:     #E8C96A;  /* Decorative use only */

  /* ── Neutrals ── */
  --color-bg:             #F7F6F3;  /* Page background */
  --color-bg-section-alt: #EFF4F4;  /* Slight teal tint for alternating sections */
  --color-surface:        #FFFFFF;  /* Card / form backgrounds */
  --color-border:         #EDECE8;  /* Dividers, card borders */
  --color-text-primary:   #1B2E2E;  /* Headings, body — dark teal-charcoal */
  --color-text-secondary: #7F7F7F;  /* Nav links, captions (existing value) */
  --color-text-on-teal:   #FFFFFF;  /* Text on teal button/bg */

  /* ── Typography ── */
  --font-heading:   'Inter', system-ui, sans-serif;
  --font-body:      'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;

  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;

  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.65;

  /* ── Spacing ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ── Layout ── */
  --container-max:   1100px;
  --container-pad:   var(--space-6);
  --section-pad-y:   var(--space-20);
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       12px;

  /* ── Hero slideshow ── */
  --hero-height-desktop:  55vh;
  --hero-height-mobile:   45vh;
  --hero-slide-duration:  5s;   /* Time each slide is visible */
  --hero-slide-count:     5;    /* Must match number of .hero-slide elements */

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

  /* ── Mobile sticky footer ── */
  --sticky-footer-height: 60px;
  --sticky-footer-z:      100;
}