/*
 *  ██████╗ ███████╗███╗   ██╗    ███████╗ █████╗ ██╗   ██╗███████╗██████╗ ███████╗
 *  ██╔══██╗██╔════╝████╗  ██║    ██╔════╝██╔══██╗╚██╗ ██╔╝██╔════╝██╔══██╗██╔════╝
 *  ██████╔╝█████╗  ██╔██╗ ██║    ███████╗███████║ ╚████╔╝ █████╗  ██████╔╝███████╗
 *  ██╔══██╗██╔══╝  ██║╚██╗██║    ╚════██║██╔══██║  ╚██╔╝  ██╔══╝  ██╔══██╗╚════██║
 *  ██████╔╝███████╗██║ ╚████║    ███████║██║  ██║   ██║   ███████╗██║  ██║███████║
 *  ╚═════╝ ╚══════╝╚═╝  ╚═══╝    ╚══════╝╚═╝  ╚═╝   ╚═╝   ╚══════╝╚═╝  ╚═╝╚══════╝
 *
 *  Built by Ben Sayers LLC | bsayers.com
 *  Premium Web Design + Development | Livingston County, MI
 *
 *  Reid Residence - Design Tokens - "Blueprint & Sky" (architectural monograph, light)
 *  ─────────────────────────────────────────────────────────────────────────
 */

:root {
    /* === COLOR: Blueprint & Sky =========================================== */
    /* Blueprint blue - the single brand/accent voice (use sparingly: 3-5/viewport) */
    --color-primary:        #21466E;  /* blueprint blue */
    --color-primary-light:  #2F5C8A;
    --color-primary-dark:   #16314D;
    --color-secondary:      #5B7FA6;  /* sky / muted steel */
    --color-accent:         #21466E;  /* alias of primary - CTA voice */
    --color-accent-hover:   #2F5C8A;

    /* Ink + text */
    --color-ink:            #1A1C1E;  /* near-black architectural ink */
    --color-text:           #1A1C1E;
    --color-text-light:      #6B7178; /* graphite - captions, telemetry */
    --color-text-inverse:   #F4F2ED;

    /* Paper + surfaces */
    --color-bg:             #F6F4EF;  /* warm paper */
    --color-bg-alt:         #EEEAE1;  /* drafting tone */
    --color-bg-dark:        #1A1C1E;  /* cinema section */
    --color-card:           #FFFFFF;
    --color-border:         #E2DED5;  /* hairline */

    /* On-dark (cinema section + footer) */
    --color-text-on-dark:        #F4F2ED;
    --color-text-muted-on-dark:  rgba(244, 242, 237, 0.62);
    --color-border-on-dark:      rgba(244, 242, 237, 0.14);

    /* State */
    --color-success:        #2D7D46;
    --color-error:          #B23B3B;

    /* Tints (for radial glows, overlays) */
    --tint-primary-08:      rgba(33, 70, 110, 0.08);
    --tint-primary-04:      rgba(33, 70, 110, 0.04);

    /* === TYPOGRAPHY ======================================================= */
    --font-display: 'Cabinet Grotesk', 'Arial Narrow', sans-serif;
    --font-heading: var(--font-display);
    --font-body:    'Satoshi', system-ui, sans-serif;
    --font-ui:      var(--font-body);
    --font-mono:    'Space Mono', 'Courier New', monospace;

    /* Fluid type scale (mobile min -> desktop max). Big jumps for display. */
    --text-xs:   clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
    --text-sm:   clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --text-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
    --text-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
    --text-3xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);
    --text-4xl:  clamp(2.75rem, 1.9rem + 4vw, 5rem);
    --text-5xl:  clamp(3.25rem, 2rem + 6vw, 6.5rem);
    --text-6xl:  clamp(3.75rem, 2rem + 8.5vw, 8.5rem);

    --leading-tight: 1.04;
    --leading-snug:  1.18;
    --leading-body:  1.62;
    --tracking-tight: -0.025em;
    --tracking-display: -0.04em;
    --tracking-wide: 0.08em;
    --tracking-mono: 0.12em;

    /* === SPACING (fluid) ================================================== */
    --space-2xs: clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
    --space-xs:  clamp(0.5rem, 0.44rem + 0.25vw, 0.75rem);
    --space-sm:  clamp(0.75rem, 0.64rem + 0.5vw, 1.125rem);
    --space-md:  clamp(1.25rem, 1rem + 1.1vw, 2rem);
    --space-lg:  clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
    --space-xl:  clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);
    --space-2xl: clamp(4.5rem, 3.2rem + 5.5vw, 8rem);
    --space-section: clamp(4rem, 3rem + 4.5vw, 8.5rem);

    /* === LAYOUT =========================================================== */
    --container-max:    1240px;
    --container-narrow: 760px;
    --container-wide:   1480px;
    --container-pad:    clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem);

    /* === MOTION =========================================================== */
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 160ms var(--ease-out-quart);
    --transition-base: 320ms var(--ease-out-quart);
    --transition-slow: 560ms var(--ease-out-expo);

    /* === BORDERS + SHADOWS ================================================ */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --hairline: 1px solid var(--color-border);
    --shadow-sm: 0 1px 2px rgba(22, 49, 77, 0.06);
    --shadow-md: 0 8px 24px -10px rgba(22, 49, 77, 0.18);
    --shadow-lg: 0 24px 60px -24px rgba(22, 49, 77, 0.28);

    /* Header height (used for scroll offsets + sticky math) */
    --header-h: 4.5rem;
}