/* === Afitt Bistro Theme — Design Tokens === */
/* Canonical source: AFITT_MASTER_GUIDE.md (design system) */
/* Raw values ONLY in this file. Components reference tokens via var(). */

:root {
    /* === Brand === */
    --color-brand-orange:         #F47A1F;
    --color-brand-orange-hover:   #E06910;
    --color-brand-red:            #D94A32; /* Paprika Red (brand palette) */
    --color-brand-charcoal:       #211A16;
    /* Vivid CTA red — HERO redesign mock (2026-10-03, sampled #E11B1C). */
    --color-brand-red-bright:         #E11B1C;
    --color-brand-red-bright-hover:   #C41718;

    /* === Backgrounds === */
    --color-bg-cream:             #FFF7E8;
    --color-bg-white:             #FFFFFF;

    /* === Text === */
    --color-text-primary:         #211A16;
    --color-text-secondary:       #5C4F47;
    --color-text-muted:           #76685F;
    --color-text-inverse:         #FFFFFF;

    /* === Borders === */
    --color-border-light:         #E8DED5;
    --color-border-medium:        #D4C8BD;

    /* === Overlay & Surface === */
    --color-overlay-backdrop:     rgba(0, 0, 0, 0.5);
    --color-surface-glass:        rgba(255, 255, 255, 0.15);

    /* === Category Colors (CONFIRMED — brand palette) === */
    --cat-snack:    #F47A1F;
    --cat-soup:     #D94A32;
    --cat-main:     #A94432;
    --cat-side:     #D9A321;
    --cat-veggie:   #78A934;
    --cat-thai:     #168A72;
    --cat-fish:     #167F91;
    --cat-burger:   #E9502E;
    --cat-dessert:  #914C72;
    --cat-drink:    #315F7A;
    --cat-popular:  #F47A1F;

    /* === Spacing === */
    --space-2xs:   0.25rem;
    --space-xs:    0.5rem;
    --space-sm:    0.75rem;
    --space-md:    1rem;
    --space-lg:    1.5rem;
    --space-xl:    2rem;
    --space-2xl:   3rem;
    --space-3xl:   4rem;

    /* === Radii === */
    --radius-sm:    0.5rem;
    --radius-md:    0.75rem;
    --radius-lg:    1rem;
    --radius-xl:    1.5rem;
    --radius-full:  9999px;

    /* === Shadows === */
    --shadow-card:        0 2px 8px rgba(0,0,0,0.08);
    --shadow-card-hover:  0 4px 20px rgba(0,0,0,0.12);
    --shadow-modal:       0 8px 40px rgba(0,0,0,0.18);
    --shadow-button:      0 2px 4px rgba(0,0,0,0.10);

    /* === Motion & Transforms === */
    --transition-fast:      150ms ease;
    --transition-base:      250ms ease;
    --transition-slow:      400ms ease;
    --motion-modal-enter:   200ms ease;

    --scale-hover:          1.03;
    --scale-active:         0.97;
    --scale-card-hover:     1.02;
    --scale-round-active:   0.9;

    /* === Controls === */
    --control-round-size:   44px;
    --control-icon-size:    20px;
    --control-icon-cat:     32px;

    /* === Focus & Active === */
    --focus-ring-width:     2px;
    --focus-ring-offset:    2px;
    --active-border-width:  3px;

    /* === Modal === */
    --modal-max-width:          480px;
    --modal-mobile-max-height:  85vh;
    --modal-radius:             var(--radius-xl);

    /* === Operational status bar (owner colour contract, PROMPT 1) === */
    /* Resolver error is amber/safe; never green. */
    --status-green-bg:   #E8F5E9;
    --status-green-fg:   #1B5E20;
    --status-orange-bg:  #FFF3E0;
    --status-orange-fg:  #7A3D00;
    --status-red-bg:     #FDECEA;
    --status-red-fg:     #9E2013;
    --status-amber-bg:   #FFF8E1;
    --status-amber-fg:   #7A5C00;

    /* === Z-Index === */
    --z-dropdown:     100;
    --z-sticky:       200;
    --z-overlay:      300;
    --z-modal:        400;
    --z-notification: 500;

    /* === Component Semantic === */
    --card-product-ratio:           2 / 3;
    --card-category-ratio:          3 / 2;
    --card-category-band-height:    30%;
    --card-product-radius:          var(--radius-lg);
    --card-category-radius:         var(--radius-lg);
}