/* ==========================================================================
   CSS Variables - SalesJob Design System
   Based on Figma Design
   ========================================================================== */

:root {
    /* Primary Colors from Figma */
    --sj-green: #005C42;
    --sj-green-section: #005C42;
    --sj-green-hover: #017756;
    --sj-green-accent: #25D568;
    --sj-green-accent-light: #25D568;
    --sj-green-light: #25D568;
    --sj-alternate-green: #017756;
    --sj-offwhite: #F7EFEF;
    --sj-white: var(--sj-offwhite);
    --sj-black: #005C42;
    --sj-grey: #DFDFDF;
    --sj-grey-light: #E9E9E9;
    --sj-grey-medium: #DFDFDF;
    --sj-grey-dark: #005C42;
    --sj-dark: #005C42;
    --sj-grey-input: #DFDFDF;

    /* Typography */
    --font-primary: 'ABC Repro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font Sizes from Figma */
    --font-size-h1: 58px;
    --font-size-h2: 38px;
    --font-size-h2-special: 48px;
    --font-size-h3: 26px;
    --font-size-h4: 20px;

    --font-size-content-hero: var(--font-size-h1);
    --font-size-hero: var(--font-size-h1);
    --font-size-claim: var(--font-size-h2);
    --font-size-body: var(--font-size-h3);
    --font-size-sup: 22px;
    --font-size-button: 20px;
    --font-size-small: 18px;
    --font-size-xs: 16px;
    --font-size-xss: 14px;

    /* Line Heights */
    --line-height-hero: var(--font-size-h1);
    --line-height-h1: var(--font-size-h1);
    --line-height-body: var(--font-size-body);
    --line-height-normal: 1.3;

    /* Breakpoints */
    --breakpoint-sm: 768px;
    --breakpoint-md: 992px;
    --breakpoint-lg: 1140px;
    --breakpoint-xl: 1582px;

    /* Container Max Widths */
    --container-sm: 750px;
    --container-md: 970px;
    --container-lg: 1140px;
    --container-xl: 1540px;

    /* Grid Configuration */
    --grid-columns-mobile: 6;
    --grid-columns-sm: 6;
    --grid-columns-md: 10;
    --grid-columns-lg: 14;
    --grid-columns-xl: 14;

    /* Grid Gutter (Spacing between columns) */
    --grid-gutter: 16px;
    --grid-gutter-sm: 16px;
    --grid-gutter-md: 20px;
    --grid-gutter-lg: 24px;
    --grid-gutter-xl: 28px;

    /* Spacing Scale */
    --spacing-base: 1rem;
    --spacing-1: calc(var(--spacing-base) * 0.25); /* 4px */
    --spacing-2: calc(var(--spacing-base) * 0.5); /* 8px */
    --spacing-3: var(--spacing-base); /* 16px */
    --spacing-4: calc(var(--spacing-base) * 1.5); /* 24px */
    --spacing-5: calc(var(--spacing-base) * 2); /* 32px */
    --spacing-6: calc(var(--spacing-base) * 3); /* 48px */
    --spacing-7: calc(var(--spacing-base) * 4); /* 64px */
    --spacing-8: calc(var(--spacing-base) * 6); /* 96px */

    /* Container */
    --container-max: 1582px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 28px;
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 200ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;

    /* Z-Index Scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-tooltip: 500;

    --shadow-default:   0 1px 3px rgba(0, 0, 0, 0.08),
                        0 4px 8px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
    :root {
        --font-size-h1: 38px;
        --font-size-h2: 28px;
        --font-size-h2-special: 38px;
        --font-size-h3: 24px;
        --font-size-h4: 20px;
    }
}


.font-size-body {
    font-size: var(--font-size-body);
}

.font-size-small {
    font-size: var(--font-size-small);
}

.font-size-button {
    font-size: var(--font-size-button);
}