:root {
    /* ── Surfaces ───────────────────────────────────────────────
       Cool neutral charcoal. Green channel = blue channel,
       red channel slightly lower — kills all purple cast.        */
    --ink: #14181c; /* body / deepest bg — true cool charcoal   */
    --asphalt: #1c2126; /* card backs, sections                     */
    --steel-900: #252b32; /* elevated surfaces                        */
    --steel-700: #333a42; /* borders, dividers                        */
    --steel-500: #4a525c; /* muted borders                            */
    --steel-300: #7a838f; /* placeholder / hint                       */
    --steel-200: #a8b1bc; /* secondary text                           */
    --steel-100: #c8cfd8; /* body text                                */
    --bone: #ecf0f4; /* headings / labels                        */
    --white: #ffffff;

    /* ── Brand — red · white · blue ────────────────────────────
       Inspired by an airbrushed American flag on the side of a
       red-white-and-blue heavy wrecker. Bold enough to earn it,
       not so loud it's a bumper sticker.                            */
    --navy: #1e56c8; /* was #1747ac  — a shade brighter       */
    --navy-deep: #163fa8; /* was #0f2f75  — hover / shadow         */
    --navy-light: #3d72e8; /* NEW — link hover, glow tint           */
    --red: #e8182a; /* was #ed131d  — primary red            */
    --red-hot: #ff3040; /* was #ff2a35  — hover / CTA            */
    --red-deep: #b01020; /* NEW — shadow red, depth layer         */
    --star-white: #e8ecf5; /* NEW — cool off-white like star field  */

    /* ── Accents ────────────────────────────────────────────────*/
    --amber: #ffb020; /* unchanged — emergency lamp amber      */
    --amber-hot: #ff8c00; /* was #ff7a00                           */
    --amber-pale: #ffd166; /* NEW — subtle highlight / star glint   */

    /* ── Type ───────────────────────────────────────────────────*/
    --font-display: "Barlow Condensed", "Oswald", Impact, sans-serif;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* ── Scale ──────────────────────────────────────────────────*/
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.875rem;
    --fs-2xl: 2.625rem;
    --fs-3xl: 4rem;
    --fs-display: clamp(2.75rem, 7vw, 6.5rem);

    /* ── Space ──────────────────────────────────────────────────*/
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    --sp-10: 8rem;

    /* ── Layout ─────────────────────────────────────────────────*/
    --container: 1280px;
    --container-narrow: 960px;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 14px;

    /* ── Motion ─────────────────────────────────────────────────*/
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
    --dur-fast: 180ms;
    --dur: 320ms;
    --dur-slow: 600ms;

    /* ── Effects — beefed up now that bg is lighter ─────────────*/
    --glow-amber: 0 0 40px rgba(255, 176, 32, 0.5), 0 0 80px rgba(255, 176, 32, 0.18);
    --glow-red: 0 0 48px rgba(232, 24, 42, 0.55), 0 0 96px rgba(232, 24, 42, 0.2);
    --glow-navy: 0 0 40px rgba(30, 86, 200, 0.5), 0 0 80px rgba(30, 86, 200, 0.2);
    --shadow-card: 0 24px 60px -20px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.06) inset;

    /* ── Procedural textures ────────────────────────────────────*/
    --noise:
        radial-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0/3px 3px,
        radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px) 1px 1px/3px 3px;
    --brushed-steel: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);

    /* ── Patriot stripe — bold red / white / blue layering ────
       Use as background on CTA bands, hero overlays, section caps.  */
    --stripe-patriot: linear-gradient(
        180deg,
        rgba(232, 24, 42, 0.18) 0%,
        rgba(255, 255, 255, 0.06) 33%,
        rgba(232, 24, 42, 0.16) 66%,
        rgba(30, 86, 200, 0.18) 100%
    );
    /* Crisp 3-bar flag stripe for borders / accents */
    --stripe-rwb-bar: linear-gradient(
        90deg,
        var(--red) 0%,
        var(--red) 33.3%,
        var(--white) 33.3%,
        var(--white) 66.6%,
        var(--navy) 66.6%,
        var(--navy) 100%
    );
}

/* ════════════════════════════════════════════════════════════════════
   LIGHT THEME — bright, clean, still patriotic
   Inverts surfaces, keeps red/navy brand intact, lifts contrast.
   Activates via JS: <html data-theme="light">
   ════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    /* Surfaces — paper, fog, steel */
    --ink: #f5f7fa;        /* page bg */
    --asphalt: #ffffff;    /* card / section bg */
    --steel-900: #eef1f5;  /* elevated surface */
    --steel-700: #d8dde4;  /* borders */
    --steel-500: #b4bcc8;  /* muted borders */
    --steel-300: #6b7480;  /* placeholder / hint — readable on white */
    --steel-200: #4a525e;  /* secondary text */
    --steel-100: #2a3038;  /* body text */
    --bone: #0e1218;       /* headings — near-black for max contrast */
    --white: #0e1218;      /* invert: pure-white slots become near-black ink */

    /* Brand — same red/navy but slightly deepened for white background */
    --navy: #0a3161;       /* deeper navy reads better on white */
    --navy-deep: #061f44;
    --navy-light: #1e56c8;
    --red: #c1162a;        /* deeper red — still American red, more legible on white */
    --red-hot: #e8182a;
    --red-deep: #8a0c1e;

    /* Effects — softer glows, lighter shadows */
    --glow-amber: 0 0 24px rgba(255, 150, 0, 0.35), 0 0 48px rgba(255, 150, 0, 0.12);
    --glow-red:   0 0 24px rgba(193, 22, 42, 0.35), 0 0 48px rgba(193, 22, 42, 0.15);
    --glow-navy:  0 0 24px rgba(10, 49, 97, 0.35),  0 0 48px rgba(10, 49, 97, 0.15);
    --shadow-card: 0 12px 28px -12px rgba(20, 28, 40, 0.18), 0 1px 0 rgba(255, 255, 255, 0.8) inset;

    /* Procedural textures — flip noise polarity for light bg */
    --noise:
        radial-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px) 0 0/3px 3px,
        radial-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 1px) 1px 1px/3px 3px;
    --brushed-steel: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.025) 0 1px, transparent 1px 3px);

    /* Patriot stripe — bump alpha since base is light */
    --stripe-patriot: linear-gradient(
        180deg,
        rgba(193, 22, 42, 0.10) 0%,
        rgba(255, 255, 255, 0.0) 33%,
        rgba(193, 22, 42, 0.08) 66%,
        rgba(10, 49, 97, 0.10) 100%
    );
}

/* Smooth transition between themes */
html { transition: background-color 0.4s ease, color 0.4s ease; }
body, .nav, .topbar, .card, .service-card, .review-card, .feature-split,
.cta-band, footer, .area-card, .inventory-card {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}