@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ====================================
VARIABLES
===================================== */

:root {
    
    /* Colors */

    --color-primary: #172B4D;
    --color-primary-hover: #10213D;

    --color-accent: #1E9E6A;
    --color-accent-hover: #178556;

    --color-background: #FFFFFF;
    --color-surface: #F3F6FA;
    --color-surface-hover: #EAF0F7;

    --color-text: #172B4D;
    --color-text-muted: #667085;
    --color-text-inverse: #FFFFFF;

    --color-border: #D9E0EA;
    --color-border-strong: #B8C4D6;

    --color-sale: #FF9F43;
    --color-success: #16845B;
    --color-error: #D92D20;
    
    --color-focus: #2878F0;

    --pastel-blue: #E6F0FB;
    --pastel-blue-ink: #2F6DB5;

    --pastel-green: #E3F5EC;
    --pastel-green-ink: #1E9E6A;

    --pastel-pink: #FCE8F0;
    --pastel-pink-ink: #C2457A;

    --pastel-purple: #EEE9FB;
    --pastel-purple-ink: #6B4FC4;

    --pastel-yellow: #FFF4D9;
    --pastel-yellow-ink: #B27A0A;

    /* Typography */

    --font-body: "Inter", sans-serif;
    --font-heading: "Inter", sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --font-size-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
    --font-size-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
    --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --font-size-md: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    --font-size-lg: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
    --font-size-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    --font-size-2xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
    --font-size-3xl: clamp(2.25rem, 1.65rem + 2.4vw, 3.25rem);

    --line-height-tight: 1.2;
    --line-height-heading: 1.3;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.75;

    --letter-spacing-tight: -0.03em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;

    /* Spacing */

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --spacing-3xl: 3rem;
    --spacing-4xl: 4rem;
    --spacing-5xl: 5rem;

    --section-spacing: clamp(2.5rem, 5vw, 5rem);
    --content-gap: clamp(1rem, 2vw, 1.5rem);
    --grid-gap: clamp(0.75rem, 2vw, 1.5rem);

    /* Layout */

    --container-width: 1200px;
    --container-large-width: 1320px;
    --container-wide-width: 1440px;
    --container-padding: clamp(1rem, 3vw, 2rem);

    --header-height: 80px;

    /* Borders & Radius */

    --border-width: 1px;
    --border-style: var(--border-width) solid var(--color-border);

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 999px;

    /* Shadows */
    
    --shadow-sm: 0 1px 3px rgb(23 43 77 / 8%);
    --shadow-md: 0 4px 12px rgb(23 43 77 / 10%);
    --shadow-lg: 0 12px 28px rgb(23 43 77 / 12%);

    /* Transitions */

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* Layers */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 900;
    --z-modal: 1000;
}

/* ====================================
MEDIA QUERIES
===================================== */

@media (max-width: 768px) {
    :root {
        --header-height: 68px;
        --section-spacing: 2.5rem
    }
}

@media (max-width: 480px) {
    :root {
        --container-padding: 1rem;
        --grid-gap: 0.7rem;
    }
}