:root {
    /* ===== Brand: TJ Jitters =====
       A coffee shop with an electric/playful identity (purple→teal gradient
       + lime green accent + lightning motifs). Light surface for readability,
       gradient reserved for hero/CTA surfaces.
       Refs: Logo.png, JITTERS MENU.png, Jitterbeancoffeecup.png */

    /* Gradient stops (top of logo, hero banners, primary CTA) */
    --color-brand:        #6366F1;   /* indigo (gradient left)  */
    --color-brand-mid:    #14B8A6;   /* teal (gradient middle)   */
    --color-brand-end:    #22C55E;   /* green (gradient right)  */
    --gradient-brand:     linear-gradient(135deg, #6366F1 0%, #14B8A6 55%, #22C55E 100%);

    /* Aliases kept for legacy references in admin/kitchen/site.css */
    --color-brand-dark:   #1E1B4B;   /* deep indigo — footer + nav hover text */
    --color-brand-soft:   #A5B4FC;   /* light indigo — used as a soft partner to brand */

    /* Surfaces */
    --bg-page:            #FAF7F2;   /* warm cream (overrides previous maroon theme) */
    --surface:            #FFFFFF;
    --surface-elev:       #FFFFFF;

    /* Borders / shadows */
    --border:             #E5E7EB;
    --border-strong:      #D1D5DB;
    --shadow-sm:          0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md:          0 4px 14px rgba(99, 102, 241, .12);
    --shadow-lg:          0 10px 30px rgba(99, 102, 241, .18);

    /* ===== Status (semantic) ===== */
    --color-info:         #0EA5E9;
    --color-warn:         #F59E0B;
    --color-success:      #16A34A;
    --color-muted:        #6B7280;
    --color-danger:       #DC2626;

    /* ===== Accent (CTA, button, link) ===== */
    --color-accent:       #84CC16;   /* lime — same vibe as "JITTERS" lettering */
    --color-accent-dark:  #65A30D;
    --color-accent-fg:    #1A1A1A;   /* dark text on lime CTA */

    /* ===== Electric/lightning accent (decoration only) ===== */
    --color-electric:     #E0F2FE;   /* near-white blue, for sparks on hover */

    /* ===== Text ===== */
    --text-primary:       #1E1B4B;   /* deep indigo — keeps brand identity in body copy */
    --text-secondary:     #475569;
    --text-muted:         #64748B;
    --text-inverse:       #FFFFFF;
    --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: a friendly rounded sans for UI, and a display fallback that
       reads close to the logo's fantasy/script style. Logo image is used
       directly in the header so we don't need the script face installed. */
    --ff-sans:  "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ff-display: "Fredoka", "Nunito", 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 (slightly rounder to match the playful brand) ===== */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* ===== Elevation ===== */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 14px rgba(99, 102, 241, .12);
    --shadow-lg: 0 14px 36px rgba(99, 102, 241, .18);

    /* ===== 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;
    }
}