@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Inter:wght@300;400;500;600&family=Oswald:wght@400;500;600;700&display=swap');

:root {
    /* ── Colors (USA Wire Color System) ─────────────────── */
    --color-black:      #0d0e11;   /* Carbon Black — main BG */
    --color-surface:    #16181f;   /* Dark Slate — secondary BG */
    --color-card:       #1e2129;   /* Charcoal — card BG */
    --color-red:        #0D43EE;   /* Electric Red — hot wire */
    --color-red-dark:   #1257b0;   /* Darker red for hover */
    --color-green:      #0D43EE;   /* Voltage Green — ground wire */
    --color-green-dark: #1257b0;
    --color-blue:       #1a6fdb;   /* Wire Blue — neutral/traveler */
    --color-blue-dark:  #1257b0;
    --color-white:      #ffffff;
    --color-grey-light: #a0a5b1;   /* Neutral wire grey */
    --color-grey:       #6b7280;
    --color-border:     #2e333d;   /* Steel grey — conduit */
    --color-overlay:    rgba(13,14,17,0.75);

    /* ── Typography ─────────────────────────────────────── */
    --font-heading:  'Barlow Condensed', sans-serif;
    --font-body:     'Inter', sans-serif;
    --font-accent:   'Oswald', sans-serif;

    /* ── Font Sizes ─────────────────────────────────────── */
    --fs-hero:  72px;
    --fs-h1:    56px;
    --fs-h2:    44px;
    --fs-h3:    32px;
    --fs-h4:    24px;
    --fs-h5:    20px;
    --fs-body:  16px;
    --fs-sm:    14px;
    --fs-xs:    12px;

    /* ── Spacing ─────────────────────────────────────────── */
    --section-py:    100px;
    --section-py-sm: 64px;

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

    /* ── Transitions ─────────────────────────────────────── */
    --transition: all 0.3s ease;
    --transition-slow: all 0.5s ease;

    /* ── Shadows ─────────────────────────────────────────── */
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 20px rgba(0,0,0,0.4);
    --shadow-red: 0 0 20px rgba(41, 120, 238, 0.301);
    --shadow-green: 0 0 20px rgba(41, 120, 238, 0.301);
}

@media (max-width: 1400px) {
    :root {
        --fs-hero: 64px;
        --fs-h1:   48px;
        --fs-h2:   40px;
        --section-py: 90px;
    }
}

@media (max-width: 1200px) {
    :root {
        --fs-hero: 56px;
        --fs-h1:   44px;
        --fs-h2:   36px;
        --fs-h3:   28px;
        --section-py: 80px;
    }
}

@media (max-width: 1024px) {
    :root {
        --fs-hero: 48px;
        --fs-h1:   40px;
        --fs-h2:   32px;
        --section-py: 70px;
    }
}

@media (max-width: 768px) {
    :root {
        --fs-hero: 40px;
        --fs-h1:   34px;
        --fs-h2:   28px;
        --fs-h3:   24px;
        --fs-h4:   20px;
        --section-py: 60px;
        --section-py-sm: 44px;
    }
}

@media (max-width: 576px) {
    :root {
        --fs-hero: 34px;
        --fs-h1:   28px;
        --fs-h2:   24px;
        --section-py: 50px;
    }
}