/* ==========================================================================
   Design Tokens — Wellbeing Foundation
   ========================================================================== */

:root {
    /* Colors */
    --color-primary:        #1F4E79;
    --color-primary-dark:   #163a5c;
    --color-primary-light:  #2a6ba3;
    --color-secondary:      #2E8B57;
    --color-secondary-dark: #236b43;
    --color-secondary-light:#3aad6e;
    --color-accent:         #4DA6FF;
    --color-accent-dark:    #2b8de6;
    --color-bg:             #F5F7FA;
    --color-bg-white:       #FFFFFF;
    --color-text:           #333333;
    --color-text-light:     #666666;
    --color-text-muted:     #999999;
    --color-border:         #E0E4E8;
    --color-border-light:   #F0F0F0;
    --color-success:        #28a745;
    --color-warning:        #ffc107;
    --color-error:          #dc3545;

    /* Gradients */
    --gradient-primary:     linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    --gradient-hero:        linear-gradient(135deg, rgba(31,78,121,0.85) 0%, rgba(46,139,87,0.75) 100%);
    --gradient-cta:         linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);

    /* Typography */
    --font-heading:         'Montserrat', sans-serif;
    --font-body:            'Open Sans', sans-serif;

    --fw-regular:           400;
    --fw-medium:            500;
    --fw-semibold:          600;
    --fw-bold:              700;
    --fw-extrabold:         800;

    --fs-xs:                clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --fs-sm:                clamp(0.8125rem, 0.775rem + 0.25vw, 0.875rem);
    --fs-base:              clamp(0.9375rem, 0.9rem + 0.25vw, 1rem);
    --fs-md:                clamp(1rem, 0.925rem + 0.5vw, 1.125rem);
    --fs-lg:                clamp(1.125rem, 1rem + 0.75vw, 1.375rem);
    --fs-xl:                clamp(1.375rem, 1.2rem + 1vw, 1.75rem);
    --fs-2xl:               clamp(1.75rem, 1.5rem + 1.5vw, 2.25rem);
    --fs-3xl:               clamp(2rem, 1.7rem + 2vw, 3rem);
    --fs-4xl:               clamp(2.5rem, 2rem + 3vw, 3.75rem);

    --lh-tight:             1.2;
    --lh-snug:              1.3;
    --lh-normal:            1.6;
    --lh-relaxed:           1.8;

    /* Spacing */
    --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;
    --space-section:        clamp(3rem, 2.5rem + 3vw, 6rem);

    /* Layout */
    --container-max:        1200px;
    --container-narrow:     800px;
    --container-wide:       1400px;
    --container-padding:    clamp(1rem, 0.5rem + 2vw, 2rem);

    /* Borders */
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            12px;
    --radius-xl:            16px;
    --radius-full:          50%;

    /* 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);
    --shadow-xl:            0 20px 60px rgba(0, 0, 0, 0.15);

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

    /* Z-index scale */
    --z-dropdown:           100;
    --z-sticky:             200;
    --z-overlay:            300;
    --z-modal:              400;
}