/* ==========================================================================
   1. STYLESHEET IMPORTS (Must sit at the absolute top of the engine)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Syne:wght@700;800&display=swap');
@import url('header.css');
@import url('footer.css');
@import url('components.css');
@import url('mobile-header.css');

/* ==========================================================================
   2. GLOBAL DESIGN SYSTEM TOKENS & VARIABLES
   ========================================================================== */
:root {
    /* Brand Color Theme Palette */
    --color-black: #0A0A0A;     /* Deep premium black background */
    --color-dark-bg: #111111;   /* Section background variations */
    --color-dark-card: #1A1A1A; /* Structural card backgrounds */
    --color-red: #C0150F;       /* Precision brand action red */
    --color-white: #FFFFFF;     /* Solid high-contrast text overlay */
    --color-gray-text: #A5A5A5; /* Muted readable body content copy */

    /* Typography Engine Rules */
    --font-heading: 'Inter', sans-serif; /* Clean, modern geometric text headings */
    --font-body: 'Inter', sans-serif;    /* Clean tracking body text engine */
    --font-logo: 'Syne', sans-serif;    /* Aggressive, wide agency tech face branding */
}

/* ==========================================================================
   3. GLOBAL MARGIN RESETS & BOX MODEL FIX
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Fixed: Corrected from your broken box-space attribute */
}

/* ==========================================================================
   4. BASE HTML STRUCTURAL OVERRIDES
   ========================================================================== */
body {
    background-color: var(--color-black);
    color: var(--color-gray-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Heading Scaling & Rules */
h1, h2, h3, h4 {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Interactive Link Element Baselines */
a {
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}