/* ==========================================================================
   V2 Design Tokens — INEOS Grenadier MX
   Based on ineosgrenadier.com global rebrand (2025/2026)
   ========================================================================== */

/* @font-face stubs — fallbacks active until licensed .woff2 files are placed
   in /fonts/v2/. Once available, the browser will load them automatically. */

@font-face {
    font-family: 'Formula4X4';
    src: url('/fonts/v2/Formula4X4-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NeueMontreal';
    src: url('/fonts/v2/NeueMontreal-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NeueMontreal';
    src: url('/fonts/v2/NeueMontreal-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Colors ───────────────────────────────────────────────────────── */
    --v2-cta-primary:     #FF4639;
    --v2-cta-primary-hover:#E63E32;
    --v2-bg-white:        #FFFFFF;
    --v2-bg-offwhite:     #F7F6F4;
    --v2-bg-stone-light:  #F0EFEC;
    --v2-bg-stone:        #E3E1DC;
    --v2-bg-stone-dark:   #C8C5BD;
    --v2-bg-near-black:   #202020;
    --v2-bg-footer:       #171717;
    --v2-text-primary:    #1A1A1A;
    --v2-text-secondary:  #4A4A4A;
    --v2-text-muted:      #7A7A7A;
    --v2-text-inverse:    #FFFFFF;
    --v2-border:          #D5D3CE;
    --v2-overlay-dark:    rgba(0, 0, 0, 0.55);

    /* ── Typography ───────────────────────────────────────────────────── */
    --v2-font-display:    'Formula4X4', 'Oswald', sans-serif;
    --v2-font-label:      'NeueMontreal', system-ui, -apple-system, sans-serif;
    --v2-font-body:       'Open Sans', system-ui, sans-serif;

    /* ── Fluid type scale (clamp: min, preferred, max) ────────────────── */
    --v2-size-display-xl: clamp(2.75rem, 5vw + 1rem, 5rem);
    --v2-size-display-lg: clamp(2rem, 3.5vw + 0.75rem, 3.5rem);
    --v2-size-display-md: clamp(1.625rem, 2.5vw + 0.5rem, 2.5rem);
    --v2-size-heading:    clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
    --v2-size-eyebrow:    0.8125rem;    /* 13px */
    --v2-size-body:       1rem;          /* 16px */
    --v2-size-body-lg:    1.125rem;      /* 18px */
    --v2-size-label:      0.875rem;      /* 14px */
    --v2-size-small:      0.8125rem;     /* 13px */

    /* ── Spacing (8px base) ───────────────────────────────────────────── */
    --v2-space-xs:        0.25rem;  /* 4px */
    --v2-space-sm:        0.5rem;   /* 8px */
    --v2-space-md:        1rem;     /* 16px */
    --v2-space-lg:        1.5rem;   /* 24px */
    --v2-space-xl:        2rem;     /* 32px */
    --v2-space-2xl:       3rem;     /* 48px */
    --v2-space-3xl:       4rem;     /* 64px */
    --v2-space-section:   clamp(4rem, 8vw, 7rem);

    /* ── Radii ────────────────────────────────────────────────────────── */
    --v2-radius-sm:       4px;
    --v2-radius-md:       8px;
    --v2-radius-pill:     100px;

    /* ── Layout ───────────────────────────────────────────────────────── */
    --v2-header-height:   100px;

    /* ── Transitions ──────────────────────────────────────────────────── */
    --v2-ease:            cubic-bezier(0.25, 0.1, 0.25, 1);
    --v2-duration:        200ms;
}

@media (max-width: 991.98px) {
    :root {
        --v2-header-height: 70px;
    }
}