:root {
    /* ===== Brand: Brick & Oak Pizza Co. =====
       Wood-fired brick-oven pizza. Warm, handcrafted, modern-rustic.
       Palette is terracotta orange + tan/wheat + cream, with deep
       brick-brown for ink and a toasted oak brown for accents. */

    /* Brand colors */
    --color-brand:        #B45309;   /* primary terracotta orange (brick-oven heat) */
    --color-brand-dark:   #7C2D12;   /* deep brick brown (pressed/active, header text) */
    --color-brand-soft:   #D97706;   /* lighter terracotta (hover) */
    --color-brand-deep:   #92400E;   /* mid terracotta (active / dark hover) */
    --color-oak:          #8B5A2B;   /* toasted oak brown (secondary accent) */
    --gradient-brand:     linear-gradient(180deg, #B45309 0%, #92400E 100%);

    /* Surfaces */
    --bg-page:            #FBF1E1;   /* warm tan / wheat (oven warmth) */
    --bg-page-soft:       #F5E8D2;   /* slightly deeper tan band */
    --bg-page-deep:       #EFE0C4;   /* deeper tan (alternating section) */
    --surface:            #FFFFFF;   /* pure white cards */
    --surface-elev:       #FFFFFF;

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

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

    /* ===== Accent (CTA, button, link) ===== */
    --color-accent:       #B45309;   /* terracotta CTA (matches brand) */
    --color-accent-dark:  #7C2D12;
    --color-accent-fg:    #FFFFFF;   /* white text on terracotta CTA */

    /* ===== Text ===== */
    --text-primary:       #2A1810;   /* deep brick-brown body text */
    --text-secondary:     #4B3621;
    --text-muted:         #7A6450;
    --text-inverse:       #FFFFFF;
    --text-inverse-muted: #E8D9BD;

    /* ===== 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: Fraunces - high-contrast serif with a hand-painted
         feel; carries the brick-oven letterpress mood without the
         food-truck-loudness of Bungee.
       -- 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: "Fraunces", "Playfair Display", Georgia, "Inter", 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>