/* ============================================================
   BETWEENUSPARENTS.CO — DESIGN TOKENS
   Between Us Parents | Caleb Adu, LCSW-C
   Last updated: April 30, 2026
   
   RULE: All colors, spacing, and typography use these 
   variables. Never hardcode hex values or pixel values.
   ============================================================ */

:root {

  /* ── COLORS ─────────────────────────────────────────────── */
  --color-teal:        #145F5F;   /* Primary — CTAs, headings, nav */
  --color-deep-teal:   #0C4141;   /* Dark sections, footer background */
  --color-cream:       #FFF8F0;   /* Light section backgrounds */
  --color-gold:        #D4A853;   /* Accents, credential badges, dividers */
  --color-charcoal:    #2D2D2D;   /* Body text, dark hero text */
  --color-terracotta:  #C4622D;   /* Villain/problem section accents */
  --color-white:       #FFFFFF;   /* Text on dark backgrounds */
  --color-muted:       #8A8A8A;   /* Captions, small labels */
  --color-light-bg:    #F5EFE6;   /* Products section, alternating backgrounds */
  --color-gold-light:  #F5E6C3;   /* Subtle gold backgrounds, badge fill */


  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-primary:      'Poppins', sans-serif;

  --font-size-hero:    clamp(2rem, 5vw, 3.5rem);       /* H1 hero headline */
  --font-size-h2:      clamp(1.5rem, 3vw, 2.25rem);    /* Section headlines */
  --font-size-h3:      clamp(1.1rem, 2vw, 1.5rem);     /* Card headlines */
  --font-size-body:    1rem;                            /* Body copy */
  --font-size-small:   0.875rem;                        /* Labels, captions */
  --font-size-micro:   0.75rem;                         /* Legal, fine print */

  --font-weight-bold:    700;
  --font-weight-semibold:600;
  --font-weight-medium:  500;
  --font-weight-regular: 400;

  --line-height-tight:  1.2;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;


  /* ── SPACING ─────────────────────────────────────────────── */
  --space-section:        5rem;     /* Top/bottom padding on desktop sections */
  --space-section-mobile: 3rem;     /* Top/bottom padding on mobile sections */
  --space-element:        1.5rem;   /* Between related elements */
  --space-tight:          0.75rem;  /* Between tightly grouped items */
  --space-micro:          0.375rem; /* Inside badges, labels */

  --container-max:        1100px;   /* Max content width */
  --container-padding:    1.5rem;   /* Left/right gutter */


  /* ── BORDERS ─────────────────────────────────────────────── */
  --radius-card:    12px;
  --radius-button:   8px;
  --radius-pill:   999px;
  --radius-small:    4px;


  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-card:   0 4px 24px rgba(20, 95, 95, 0.08);
  --shadow-button: 0 2px 12px rgba(20, 95, 95, 0.20);
  --shadow-lifted: 0 8px 32px rgba(20, 95, 95, 0.14);


  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;

}


/* ── RESPONSIVE SPACING OVERRIDE ─────────────────────────── */
@media (max-width: 768px) {
  :root {
    --space-section:     var(--space-section-mobile);
    --container-padding: 1rem;
  }
}


/* ── BASE RESET ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:  var(--font-primary);
  font-size:    var(--font-size-body);
  font-weight:  var(--font-weight-regular);
  line-height:  var(--line-height-normal);
  color:        var(--color-charcoal);
  background:   var(--color-cream);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width:  var(--container-max);
  margin:     0 auto;
  padding:    0 var(--container-padding);
}