/*
 * Design tokens — single source of truth: docs/Guidelines.md
 * All other CSS files reference these variables; never hardcode colors/spacing.
 */

:root {
    /* === Colors: Primary === */
    --color-primary:        #2B4C6F;
    --color-primary-light:  #3D5A7A;
    --color-primary-dark:   #1E3A5F;

    /* === Colors: Accent === */
    --color-accent:         #4FC3F7;
    --color-accent-light:   #81D4FA;
    --color-accent-dark:    #29B6F6;

    /* === Colors: Background === */
    --color-background:      #FFFFFF;
    --color-background-alt:  #F5F7FA;
    --color-background-dark: #E8EDF2;

    /* === Colors: Text === */
    --color-text:           #2B4C6F;
    --color-text-secondary: #5A7A99;
    --color-text-light:     #8FA8C1;

    /* === Colors: Support === */
    --color-success:        #66BB6A;
    --color-info:           #42A5F5;
    --color-warning:        #FFA726;
    --color-status-planned: #95A5B8;
    --color-border:         #D6E1EC;
    --color-icon:           #657D8F;

    /* === Typography === */
    --font-family-base:
        'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --font-size-hero:        clamp(3rem, 8vw, 5rem);
    --font-weight-hero:      700;
    --line-height-hero:      1.1;

    --font-size-h1:          clamp(2.5rem, 5vw, 3.5rem);
    --font-weight-h1:        700;
    --line-height-h1:        1.2;

    --font-size-h2:          clamp(2rem, 4vw, 2.75rem);
    --font-weight-h2:        700;
    --line-height-h2:        1.3;

    --font-size-h3:          clamp(1.5rem, 3vw, 2rem);
    --font-weight-h3:        700;
    --line-height-h3:        1.4;

    --font-size-body-lg:     clamp(1.125rem, 2vw, 1.25rem);
    --font-weight-body-lg:   400;
    --line-height-body-lg:   1.6;

    --font-size-body:        1rem;
    --font-weight-body:      400;
    --line-height-body:      1.7;

    --font-size-small:       0.875rem;
    --font-weight-small:     400;
    --line-height-small:     1.5;

    --font-size-caption:        0.75rem;
    --font-weight-caption:      700;
    --line-height-caption:      1.4;
    --letter-spacing-caption:   0.05em;

    /* === Spacing (8px base) === */
    --space-xs:  0.5rem;   /*   8px */
    --space-sm:  1rem;     /*  16px */
    --space-md:  1.5rem;   /*  24px */
    --space-lg:  2rem;     /*  32px */
    --space-xl:  3rem;     /*  48px */
    --space-2xl: 4rem;     /*  64px */
    --space-3xl: 6rem;     /*  96px */
    --space-4xl: 8rem;     /* 128px */

    /* === Container & Grid === */
    --container-max-width: 1400px;
    --container-padding:   clamp(1rem, 5vw, 3rem);
    --grid-columns:        12;
    --grid-gap:            2rem;

    /* === Easing === */
    --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* === Z-index scale === */
    --z-nav:     100;
    --z-overlay: 500;
    --z-modal:   1000;
}