/* ==========================================================================
   WELL Mental Health & Wellness — Design Tokens (settings.css)
   ==========================================================================
   All visual values in one place. Every other CSS file references these
   variables so colors, fonts, and spacing are consistent site-wide.

   See STYLE_GUIDE.md for the full design system reference.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     COLORS — Primary
     ------------------------------------------------------------------ */
  --color-primary:        #4D97D1;
  --color-primary-dark:   #3879B6;
  --color-primary-light:  #E8F4FB;
  --color-secondary:      #2E7D32;

  /* ------------------------------------------------------------------
     COLORS — Neutral
     ------------------------------------------------------------------ */
  --color-text:           #1A1A2E;
  --color-text-light:     #555770;
  --color-text-muted:     #8E8EA0;
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F5F7FA;
  --color-border:         #E2E4E9;
  --color-border-light:   #F0F0F3;

  /* ------------------------------------------------------------------
     COLORS — Utility
     ------------------------------------------------------------------ */
  --color-white:          #FFFFFF;
  --color-black:          #000000;
  --color-dark:           #1A1A2E;
  --color-error:          #D32F2F;
  --color-warning:        #F9A825;
  --color-success:        #2E7D32;
  --color-info:           #0288D1;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — Font Families
     ------------------------------------------------------------------ */
  --font-heading:         'Montserrat', 'Segoe UI', sans-serif;
  --font-body:            'Open Sans', 'Segoe UI', sans-serif;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — Sizes
     ------------------------------------------------------------------ */
  --text-h1:              2.5rem;
  --text-h2:              2rem;
  --text-h3:              1.5rem;
  --text-h4:              1.25rem;
  --text-lg:              1.125rem;
  --text-body:            1rem;
  --text-small:           0.875rem;
  --text-caption:         0.75rem;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — Weights
     ------------------------------------------------------------------ */
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — Line Heights
     ------------------------------------------------------------------ */
  --leading-tight:        1.2;
  --leading-snug:         1.3;
  --leading-normal:       1.6;
  --leading-relaxed:      1.75;

  /* ------------------------------------------------------------------
     SPACING — 8px base grid
     ------------------------------------------------------------------ */
  --space-xs:             0.25rem;  /*  4px */
  --space-sm:             0.5rem;   /*  8px */
  --space-md:             1rem;     /* 16px */
  --space-lg:             1.5rem;   /* 24px */
  --space-xl:             2rem;     /* 32px */
  --space-2xl:            3rem;     /* 48px */
  --space-3xl:            4rem;     /* 64px */
  --space-section:        5rem;     /* 80px */

  /* ------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------ */
  --max-width:            1200px;
  --max-width-narrow:     800px;
  --nav-height:           72px;

  /* ------------------------------------------------------------------
     BORDERS
     ------------------------------------------------------------------ */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            16px;
  --radius-pill:          9999px;

  /* ------------------------------------------------------------------
     SHADOWS
     ------------------------------------------------------------------ */
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:            0 8px 30px rgba(0, 0, 0, 0.12);

  /* ------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------ */
  --transition-fast:      150ms ease;
  --transition-base:      250ms ease;
  --transition-slow:      400ms ease;
}