/* ===================================
   DESIGN SYSTEM FOUNDATION
   Based on reference site analysis
   =================================== */

:root {
    /* ===================================
       BREAKPOINTS (for reference - used in media queries)
       =================================== */
    /* Mobile: < 640px */
    /* Tablet: 640px - 1200px */
    /* Desktop: 1200px - 1440px */
    /* Large Desktop: 1440px - 1680px */
    /* XL Desktop: 1680px+ */

    /* ===================================
       TYPOGRAPHY SCALE
       =================================== */

    /* Font Family */
    --font-primary: 'Neue Haas Grotesk Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    /* Font Sizes - Desktop (1200px+) - All on 4px grid */
    --font-size-display-1: 72px;   /* 18 × 4px */
    --font-size-display-2: 56px;   /* 14 × 4px */
    --font-size-display-3: 40px;   /* 10 × 4px */
    --font-size-quote: 28px;       /* 7 × 4px */
    --font-size-heading-1: 28px;   /* 7 × 4px */
    --font-size-heading-2: 24px;   /* 6 × 4px */
    --font-size-heading-3: 20px;   /* 5 × 4px */
    --font-size-body-large: 20px;  /* 5 × 4px - was 18px */
    --font-size-body: 16px;        /* 4 × 4px */
    --font-size-caption: 16px;     /* 4 × 4px - was 14px */
    --font-size-label: 12px;       /* 3 × 4px - was 13px */

    /* Line Heights - Pixel values on 4px grid */
    --line-height-display-1: 80px;  /* 20 × 4px - was 78px */
    --line-height-display-2: 1.15;
    --line-height-display-3: 1.2;
    --line-height-quote: 1.2;
    --line-height-heading: 1.25;
    --line-height-heading-2: 1.3;
    --line-height-heading-3: 1.4;
    --line-height-body: 1.45;
    --line-height-caption: 1.5;

    /* Letter Spacing - Negative (tighter) */
    --letter-spacing-display-1: -0.5px;
    --letter-spacing-display-2: -0.3px;
    --letter-spacing-display-3: -0.2px;

    /* Letter Spacing - Neutral */
    --letter-spacing-heading-1: 0px;
    --letter-spacing-heading-2: 0px;
    --letter-spacing-body: 0px;
    --letter-spacing-caption: 0px;
    --letter-spacing-label: 0px;

    /* Letter Spacing - Positive (looser) */
    --letter-spacing-loose: 0.2px;     /* Subtle opening */
    --letter-spacing-looser: 0.5px;    /* Moderate opening */
    --letter-spacing-loosest: 0.75px;  /* Pronounced opening */
    --letter-spacing-airy: 1px;        /* Maximum opening */

    /* Font Weights - Neue Haas Grotesk Display
       Available: 100, 200, 300, 350, 400, 450, 500, 700, 900 */
    --font-weight-ultra-thin: 100;
    --font-weight-thin: 200;
    --font-weight-extra-light: 300;
    --font-weight-light: 350;
    --font-weight-normal: 400;
    --font-weight-pro: 450;  /* Pro 55 Roman - between normal and medium */
    --font-weight-medium: 500;
    --font-weight-semibold: 700;  /* Using Bold - NHG doesn't have 600 */
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* ===================================
       SPACING SCALE - 4px Base Grid
       Numeric naming: --space-N where N = pixels/4
       =================================== */

    /* Micro Spacing (4px - 8px) */
    --space-1: 4px;    /* 1 × 4px */
    --space-2: 8px;    /* 2 × 4px */

    /* Small Spacing (12px - 36px) */
    --space-3: 12px;   /* 3 × 4px */
    --space-4: 16px;   /* 4 × 4px */
    --space-5: 20px;   /* 5 × 4px */
    --space-6: 24px;   /* 6 × 4px */
    --space-7: 28px;   /* 7 × 4px */
    --space-8: 32px;   /* 8 × 4px */
    --space-9: 36px;   /* 9 × 4px */

    /* Medium Spacing (40px - 80px) */
    --space-10: 40px;  /* 10 × 4px */
    --space-11: 44px;  /* 11 × 4px */
    --space-12: 48px;  /* 12 × 4px */
    --space-14: 56px;  /* 14 × 4px */
    --space-16: 64px;  /* 16 × 4px */
    --space-18: 72px;  /* 18 × 4px */
    --space-20: 80px;  /* 20 × 4px */

    /* Large Spacing (96px - 160px) */
    --space-24: 96px;  /* 24 × 4px */
    --space-25: 100px; /* 25 × 4px */
    --space-28: 112px; /* 28 × 4px */
    --space-32: 128px; /* 32 × 4px */
    --space-36: 144px; /* 36 × 4px */
    --space-40: 160px; /* 40 × 4px */

    /* Extra Large Spacing (176px+) */
    --space-44: 176px; /* 44 × 4px */
    --space-54: 216px; /* 54 × 4px */
    --space-65: 260px; /* 65 × 4px */
    --space-72: 288px; /* 72 × 4px */

    /* Container & Layout - Aligned to 4px grid */
    --container-padding: 16px;   /* 4 × 4px - was 15px */
    --container-max-width: 1140px; /* 285 × 4px */
    --grid-gutter: 32px;         /* 8 × 4px - was 30px */

    /* ===================================
       COLOR SYSTEM
       =================================== */

    /* Primary Colors */
    --color-black: #000000;
    --color-white: #ffffff;

    /* Grayscale */
    --color-gray-900: #343434;
    --color-gray-600: #9d9ea0;
    --color-gray-400: #acb0b7;
    --color-gray-200: #dbdcdf;

    /* Semantic Colors */
    --color-text: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-border: rgba(0, 0, 0, 0.1);
    --color-bg: var(--color-white);
    --color-bg-subtle: #f5f5f5;

    /* Accent - keeping your existing accent */
    --color-accent: #3D38F5;

    /* Overlay Colors */
    --color-overlay: rgba(0, 0, 0, 0.95);

    /* ===================================
       CONTENT WIDTHS
       =================================== */

    --content-width-narrow: 800px;  /* 200 × 4px */
    --content-width-medium: 900px;  /* 225 × 4px */

    /* ===================================
       ICON SIZES - 4px Grid
       =================================== */

    --icon-xs: 12px;   /* 3 × 4px */
    --icon-sm: 16px;   /* 4 × 4px */
    --icon-md: 20px;   /* 5 × 4px */
    --icon-lg: 24px;   /* 6 × 4px */
    --icon-xl: 40px;   /* 10 × 4px */
    --icon-2xl: 48px;  /* 12 × 4px */

    /* ===================================
       BORDER RADIUS - 4px Grid
       =================================== */

    --radius-xs: 8px;   /* 2 × 4px */
    --radius-sm: 16px;  /* 4 × 4px */
    --radius-md: 24px;  /* 6 × 4px - was 25px */
    --radius-lg: 32px;  /* 8 × 4px */
    --radius-full: 9999px;  /* Pill / Circular */

    /* ===================================
       TRANSITIONS & ANIMATIONS
       =================================== */

    /* Timing Functions */
    --ease-in-out: ease-in-out;
    --ease-smooth: cubic-bezier(0.32, 0, 0.29, 0.99);
    --ease-complex: cubic-bezier(0.38, 0.66, 0.56, 0.82);

    /* Durations */
    --duration-extra-fast: 0.15s;
    --duration-fast: 0.2s;
    --duration-medium-slow: 0.3s;
    --duration-medium: 0.4s;
    --duration-slow: 1s;

    /* Standard Transitions */
    --transition-fast: all var(--duration-fast) var(--ease-in-out);
    --transition-medium: all var(--duration-medium) var(--ease-in-out);
    --transition-slow: all var(--duration-slow) var(--ease-in-out);

    /* ===================================
       Z-INDEX SCALE
       =================================== */

    --z-index-base: 0;
    --z-index-modal: 2;
    --z-index-overlay: 3;
    --z-index-floating: 10;
    --z-index-max: 99;
}

/* ===================================
   CONTAINER SYSTEM
   Based on Bootstrap/Reference Site
   =================================== */

.container {
    width: 100%;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
    margin-right: auto;
    margin-left: auto;
}

.container-fluid {
    width: 100%;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
    margin-right: auto;
    margin-left: auto;
}

/* Container max-widths at breakpoints */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: var(--container-max-width);
    }
}

/* ===================================
   UTILITY CLASSES
   =================================== */

/* Spacing Utilities - Updated to 4px grid numeric naming */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-10 { margin-top: var(--space-10) !important; }
.mt-12 { margin-top: var(--space-12) !important; }
.mt-16 { margin-top: var(--space-16) !important; }
.mt-20 { margin-top: var(--space-20) !important; }
.mt-24 { margin-top: var(--space-24) !important; }
.mt-36 { margin-top: var(--space-36) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.mb-10 { margin-bottom: var(--space-10) !important; }
.mb-12 { margin-bottom: var(--space-12) !important; }
.mb-16 { margin-bottom: var(--space-16) !important; }
.mb-20 { margin-bottom: var(--space-20) !important; }
.mb-24 { margin-bottom: var(--space-24) !important; }
.mb-36 { margin-bottom: var(--space-36) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pt-8 { padding-top: var(--space-8) !important; }
.pt-12 { padding-top: var(--space-12) !important; }
.pt-16 { padding-top: var(--space-16) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.pb-8 { padding-bottom: var(--space-8) !important; }
.pb-12 { padding-bottom: var(--space-12) !important; }
.pb-16 { padding-bottom: var(--space-16) !important; }

/* Text Utilities */
.text-primary { color: var(--color-text) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-white { color: var(--color-white) !important; }
.text-black { color: var(--color-black) !important; }

/* Background Utilities */
.bg-white { background-color: var(--color-white) !important; }
.bg-black { background-color: var(--color-black) !important; }
.bg-subtle { background-color: var(--color-bg-subtle) !important; }

/* Transition Utilities */
.transition-fast { transition: var(--transition-fast) !important; }
.transition-medium { transition: var(--transition-medium) !important; }
.transition-slow { transition: var(--transition-slow) !important; }