/* ================================ */
/* Design tokens                    */
/* ================================ */

:root {
    /* Colors — sampled from the live design */
    --color-primary:        #324586;   /* dark blue — buttons, headings, accents */
    --color-primary-dark:   #283770;
    --color-primary-light:  #4A5BA0;

    --color-accent:         #C4B89E;   /* beige — second logo circle */

    --color-text:           #333333;
    --color-text-muted:     #7A7A7A;
    --color-text-inverse:   #FFFFFF;
    --color-heading:        #1A1A2E;

    --color-bg:             #FFFFFF;
    --color-bg-alt:         #F5F5F5;   /* footer / list cards */
    --color-bg-dark:        #1F2538;   /* hero on home */
    --color-border:         #E0E0E0;

    /* Typography */
    --font-primary: 'IBM Plex Sans Hebrew', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    /* Type scale (rem-based, mobile baseline) */
    --fs-xs:    0.75rem;    /* 12px */
    --fs-sm:    0.875rem;   /* 14px */
    --fs-base:  1rem;       /* 16px */
    --fs-md:    1.125rem;   /* 18px */
    --fs-lg:    1.25rem;    /* 20px */
    --fs-xl:    1.5rem;     /* 24px */
    --fs-2xl:   2rem;       /* 32px */
    --fs-3xl:   2.5rem;     /* 40px */
    --fs-4xl:   3rem;       /* 48px */

    --lh-tight: 1.2;
    --lh-base:  1.5;
    --lh-loose: 1.75;

    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Spacing scale (8px base) */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* Layout */
    --container-max:  1280px;
    --container-pad:  1.25rem;

    /* Header heights — for sticky offset & shrink animation */
    --header-h-default: 100px;
    --header-h-shrunk:  64px;

    /* Borders & radii */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
    --shadow:      0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:   0 12px 32px rgba(0,0,0,0.12);

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

    /* Z-index scale */
    --z-header:   100;
    --z-dropdown: 110;
    --z-overlay:  900;
    --z-modal:    1000;

    /* Breakpoints (used in JS only — CSS uses min-width media queries) */
    --bp-tablet:  768px;
    --bp-desktop: 1024px;
    --bp-large:   1280px;
}

/* Tablet+: scale type up slightly */
@media (min-width: 768px) {
    :root {
        --fs-2xl: 2.25rem;
        --fs-3xl: 3rem;
        --fs-4xl: 3.5rem;
        --container-pad: 2rem;
    }
}

/* Desktop+: full-size type */
@media (min-width: 1024px) {
    :root {
        --fs-3xl: 3.25rem;
        --fs-4xl: 4rem;
    }
}