/*
Purpose: Stores the global theme values for your entire website in one central location.
Key contents: CSS custom properties (--color-primary, --font-main, --spacing-md).
Benefit: Allows you to change your entire brand color scheme by updating just one file.
*/

@font-face {
    font-family: "Inter";
    src: url("assets/fonts/Inter-VariableFont_opsz,wght.woff2") format('woff2-variations');
    font-style: normal;
    font-weight: 100 900;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url(assets/fonts/PlusJakartaSans-VariableFont_wght.woff2) format('woff2-variations');
    font-style: normal;
    font-weight: 100 900;
}

:root {
  /* ==========================================================================
     1. PRIMITIVE TOKENS (The Raw Palette)
     ========================================================================== */
    --blue-1: #071023;
    --blue-2: #0a172f;
    --blue-3: #03205e;
    --blue-4: #002581;
    --blue-5: #002f98;
    --blue-6: #033bab;
    --blue-7: #0948c4;
    --blue-8: #0854e7;
    --blue-9: #0038a8;
    --blue-10: #0948c5;
    --blue-11: #86b5ff;
    --blue-12: #cbe2ff;

    --blue-a1: #0005f714;
    --blue-a2: #0040f921;
    --blue-a3: #0040fe53;
    --blue-a4: #003cff78;
    --blue-a5: #0046ff91;
    --blue-a6: #0052ffa5;
    --blue-a7: #075affc0;
    --blue-a8: #085bfee6;
    --blue-a9: #004fffa2;
    --blue-a10: #075affc1;
    --blue-a11: #86b5ff;
    --blue-a12: #cbe2ff;

    --blue-contrast: #fff;
    --blue-surface: #041d4d80;
    --blue-indicator: #0038a8;
    --blue-track: #0038a8;

    --gray-1: #111113;
    --gray-2: #19191b;
    --gray-3: #222325;
    --gray-4: #292a2e;
    --gray-5: #303136;
    --gray-6: #393a40;
    --gray-7: #46484f;
    --gray-8: #5f606a;
    --gray-9: #6c6e79;
    --gray-10: #797b86;
    --gray-11: #b2b3bd;
    --gray-12: #eeeef0;

    --gray-a1: #1111bb03;
    --gray-a2: #cbcbf90b;
    --gray-a3: #d6e2f916;
    --gray-a4: #d1d9f920;
    --gray-a5: #d7ddfd28;
    --gray-a6: #d9defc33;
    --gray-a7: #dae2fd43;
    --gray-a8: #e0e3fd60;
    --gray-a9: #e0e4fd70;
    --gray-a10: #e3e7fd7e;
    --gray-a11: #eff0feb9;
    --gray-a12: #fdfdffef;

    --gray-contrast: #FFFFFF;
    --gray-surface: rgba(0, 0, 0, 0.05);
    --gray-indicator: #6c6e79;
    --gray-track: #6c6e79;

    /* Gradients */
    --gradient-1: linear-gradient(-135deg, var(--blue-9) 0%, var(--blue-11) 100%);

    /* Spacing Scale — static component grid (4px basis).
        Use for anything that shouldn't visually resize with viewport width:
        button/card padding, form-field gaps, icon spacing, borders/gaps
        inside a single component. rem-based, so it still respects user
        font-size zoom settings for accessibility. */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem;  /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem;    /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem;  /* 24px */
    --space-7: 1.75rem; /* 28px */
    --space-8: 2rem;    /* 32px */

    /* Spacing Scale — fluid layout scale (320px → 1440px viewport).
        Use for macro/structural spacing that SHOULD breathe on larger
        screens: section padding-block, hero gaps, page-level margins.
        Growth roughly tracks the type scale's Perfect Fourth ratio,
        rounded to clean 4/8px values so grid rhythm stays intact. */
    --space-fluid-2xs: clamp(0.5rem, 0.429rem + 0.357vw, 0.75rem);   /* 8px → 12px */
    --space-fluid-xs:  clamp(1rem, 0.857rem + 0.714vw, 1.5rem);      /* 16px → 24px */
    --space-fluid-sm:  clamp(1.5rem, 1.357rem + 0.714vw, 2rem);      /* 24px → 32px */
    --space-fluid-md:  clamp(2rem, 1.714rem + 1.429vw, 3rem);        /* 32px → 48px */
    --space-fluid-lg:  clamp(3rem, 2.571rem + 2.143vw, 4.5rem);      /* 48px → 72px */
    --space-fluid-xl:  clamp(4.5rem, 4.071rem + 2.143vw, 6rem);      /* 72px → 96px */
    --space-fluid-2xl: clamp(6rem, 5.429rem + 2.857vw, 8rem);        /* 96px → 128px */

    /* Typography Scale — Major Third (1.25 ratio), 16px base, full H1–H6/P.
        base is fixed at 16px, the accessibility floor — never fluid.
        lg → 5xl (H6 → H1) are fluid between 320px and 1440px viewports;
        each step's mobile floor equals the step below's desktop ceiling,
        so the entire scale — mobile and desktop alike — runs on a single
        1.25 ratio instead of a separate "mobile scale".
        Desktop maxes: P 1rem · H6 1.25rem · H5 1.5625rem · H4 1.953rem
        · H3 2.441rem · H2 3.052rem · H1 3.815rem (61px). */
    --font-pri: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    --font-sec: "Inter", system-ui, -apple-system, sans-serif;

    --text-xs:   0.8rem;                                             /* 12.8px, caption/meta only — never body copy */
    --text-sm:   0.875rem;                                           /* 14px, secondary/meta text */
    --text-base: 1rem;                                               /* 16px, body (P) — accessibility floor */
    --text-lg:   clamp(1rem, 0.929rem + 0.357vw, 1.25rem);           /* 16px → 20px, H6 */
    --text-xl:   clamp(1.25rem, 1.161rem + 0.446vw, 1.5625rem);      /* 20px → 25px, H5 */
    --text-2xl:  clamp(1.5625rem, 1.451rem + 0.558vw, 1.953rem);     /* 25px → 31.25px, H4 */
    --text-3xl:  clamp(1.953rem, 1.814rem + 0.698vw, 2.441rem);      /* 31.25px → 39.06px, H3 */
    --text-4xl:  clamp(2.441rem, 2.267rem + 0.872vw, 3.052rem);      /* 39.06px → 48.83px, H2 */
    --text-5xl:  clamp(3.052rem, 2.834rem + 1.090vw, 3.815rem);      /* 48.83px → 61.04px, H1 hero */

    --line-height1: 1.1;
    --line-height2: 1.2;
    --line-height3: 1.3;
    --line-height4: 1.5;
    --line-height5: 1.6;
    
    /* Layout Metrics */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    
    /* ==========================================================================
    2. SEMANTIC TOKENS 
    ========================================================================== */
    --bg-body: var(--gray-1);
    --text: var(--gray-a12);
    --text-muted: var(--gray-a11);

    --hero-text: var(--text-4xl);

    /* Section side gutter — single clamp() covering 320px → 1440px+ viewports
        (16px → 96px) so section padding-inline never needs breakpoint
        overrides or a swap between fluid-scale steps. */
    --section-padding-x: clamp(1rem, -0.429rem + 7.143vw, 6rem); /* 16px → 96px */

    --cta-pri: var(--gray-a12);
    --cta-border: var(--blue-a8);
}