/* CSS Variables - Neo-Sorb Website */
/* Inspired by carbonclean.com design system */

:root {
    /* Primary Color Palette */
    --color-white: #fff;
    --color-black: #000;
    --color-dark-grey: #333;
    --color-grey: #8e8e8e;
    --color-light-grey: #f5f5f5;
    --color-light-blue: #00f3d7;
    --color-teal: #afeade;
    --color-teal-50: #d8f4ee;
    --color-blue: #1447da;
    --color-blue-bg: #ecf0fc;
    --color-pink: #f09;
    --color-pink-dark: #b8006e;
    --color-pink-50: rgba(255, 0, 153, .2);

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, rgb(25, 130, 110) 0%, rgb(41, 51, 61) 50%, var(--color-light-blue) 100%);
    --gradient-cta: linear-gradient(135deg, rgb(41, 51, 61) 0%, rgb(25, 130, 110) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-pink-dark) 0%, var(--color-pink) 100%);

    /* Typography */
    --body-font: "proxima-nova", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
    --heading-font: "proxima-nova", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;

    /* Font Sizes */
    --font-size-hero: 3.5em;      /* 56px */
    --font-size-h1: 2.75em;       /* 44px */
    --font-size-h2: 2.25em;       /* 36px */
    --font-size-h3: 1.75em;       /* 28px */
    --font-size-h4: 1.5em;        /* 24px */
    --font-size-h5: 1.25em;       /* 20px */
    --font-size-body: 1.125em;    /* 18px */
    --font-size-small: 1em;       /* 16px */
    --font-size-tiny: 0.875em;    /* 14px */

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* Spacing Scale */
    --size_0_10: 0.1em;
    --size_0_15: 0.15em;
    --size_0_25: 0.25em;
    --size_0_5: 0.5em;
    --size_0_75: 0.75em;
    --size_1: 1em;
    --size_1_25: 1.25em;
    --size_1_5: 1.5em;
    --size_1_75: 1.75em;
    --size_2: 2em;
    --size_3: 3em;
    --size_4: 4em;
    --size_5: 5em;
    --size_6: 6em;
    --size_7: 7em;
    --size_8: 8em;
    --size_9: 9em;
    --size_10: 10em;
    --size-padding: 1.25em;
    --size-container: 1em;

    /* Spacing (Pixel-based for layout) */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 32px;
    --spacing-lg: 60px;
    --spacing-xl: 100px;
    --spacing-2xl: 120px;

    /* Layout */
    --max-width-container: 1200px;
    --max-width-text: 900px;
    --max-width-narrow: 700px;
    --header-height: 80px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition: 0.5s;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-index Layers */
    --z-base: 1;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-header: 1000;
    --z-modal: 2000;
}

/* Responsive Font Sizes */
@media (max-width: 768px) {
    :root {
        --font-size-hero: 2.25em;     /* 36px */
        --font-size-h1: 2em;          /* 32px */
        --font-size-h2: 1.75em;       /* 28px */
        --font-size-h3: 1.5em;        /* 24px */
        --font-size-h4: 1.25em;       /* 20px */
        --font-size-h5: 1.125em;      /* 18px */
        --font-size-body: 1em;        /* 16px */

        --spacing-lg: 40px;
        --spacing-xl: 60px;
        --spacing-2xl: 80px;
        --header-height: 70px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-hero: 1.875em;    /* 30px */
        --font-size-h1: 1.75em;       /* 28px */
        --font-size-h2: 1.5em;        /* 24px */

        --spacing-lg: 32px;
        --spacing-xl: 48px;
        --spacing-2xl: 60px;
    }
}