:root {
    /* ===== Brand: Jeff's BBQ =====
       A traditional Texas barbecue truck - bold, loud, hand-painted.
       Palette is strictly black + red + white with a warm cream surface. */

    /* Brand colors */
    --color-brand:        #B3201A;   /* primary red (warm Texas smoke) */
    --color-brand-dark:   #1A1A1A;   /* deep black (header / footer / button text) */
    --color-brand-soft:   #E13A2F;   /* hover red (slightly brighter) */
    --color-brand-deep:   #7C1410;   /* pressed/active red (slightly darker) */
    --gradient-brand:     linear-gradient(180deg, #B3201A 0%, #7C1410 100%);

    /* Surfaces */
    --bg-page:            #F6F1E8;   /* warm cream (paper-bag warmth) */
    --surface:            #FFFFFF;   /* pure white cards */
    --surface-elev:       #FFFFFF;

    /* Borders / shadows */
    --border:             #E5E0D5;
    --border-strong:      #CFC8B8;
    --shadow-sm:          0 1px 2px rgba(15, 15, 15, .08);
    --shadow-md:          0 4px 14px rgba(15, 15, 15, .12);
    --shadow-lg:          0 14px 36px rgba(15, 15, 15, .18);

    /* ===== Status (semantic) ===== */
    --color-info:         #2563EB;
    --color-warn:         #D97706;
    --color-success:      #16A34A;
    --color-muted:        #6B7280;
    --color-danger:       #B3201A;   /* same red as brand */

    /* ===== Accent (CTA, button, link) ===== */
    --color-accent:       #1A1A1A;   /* black CTA on red (most BBQ signs) */
    --color-accent-dark:  #000000;
    --color-accent-fg:    #FFFFFF;   /* white text on the black CTA */

    /* ===== Text ===== */
    --text-primary:       #1A1A1A;   /* near-black body text */
    --text-secondary:     #4B5563;
    --text-muted:         #6B7280;
    --text-inverse:       #FFFFFF;   /* white text on dark backgrounds */
    --text-inverse-muted: #CBD5E1;

    /* ===== Type scale (responsive) ===== */
    --fs-xs:  0.78rem;
    --fs-sm:  0.875rem;
    --fs-md:  1rem;
    --fs-lg:  1.125rem;
    --fs-xl:  1.4rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 3rem;
    --lh-tight: 1.2;
    --lh-base:  1.5;

    /* Two faces:
       -- ff-display: Bungee - loud, condensed, very food-truck-lettering
         for the logo / hero / page h1s / h2s / CTA buttons
       -- ff-sans: Inter - clean sans for body copy and forms */
    --ff-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ff-display: "Bungee", "Inter", system-ui, sans-serif;

    /* ===== Spacing scale (4 / 8 / 16 / 24 / 32 / 48 / 64) ===== */
    --s-1:  0.25rem;
    --s-2:  0.5rem;
    --s-3:  0.75rem;
    --s-4:  1rem;
    --s-5:  1.25rem;
    --s-6:  1.5rem;
    --s-8:  2rem;
    --s-10: 2.5rem;
    --s-12: 3rem;
    --s-16: 4rem;

    /* ===== Radii ===== */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* ===== Motion ===== */
    --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 120ms;
    --dur:      200ms;
    --dur-slow: 320ms;

    /* ===== Layout ===== */
    --container-narrow: 720px;
    --container:        1100px;
    --container-wide:   1400px;

    /* ===== Touch targets ===== */
    --tap-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
</content>
</invoke>