/* ============================================================
   EMBER & SPICE — Design System Variables
   Global CSS custom properties / design tokens
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --es-primary:          #8B1A2B;
  --es-primary-dark:     #6B1220;
  --es-primary-light:    #A82438;
  --es-primary-xlight:   #F8E8EB;

  --es-secondary:        #2C2416;
  --es-secondary-mid:    #4A3B28;
  --es-secondary-light:  #7A6550;

  --es-accent:           #C8860A;
  --es-accent-dark:      #A06808;
  --es-accent-light:     #F0A500;
  --es-accent-xlight:    #FEF3DC;

  /* ── Backgrounds ── */
  --es-bg-white:         #FFFFFF;
  --es-bg-warm:          #FFF9F5;
  --es-bg-section:       #F8F4F0;
  --es-bg-dark:          #1C1208;
  --es-bg-muted:         #F2EDE8;

  /* ── Text ── */
  --es-text-dark:        #1C1C1C;
  --es-text-body:        #3A3530;
  --es-text-muted:       #6B7280;
  --es-text-light:       #9CA3AF;
  --es-text-white:       #FFFFFF;

  /* ── Borders ── */
  --es-border:           #E8E0D8;
  --es-border-dark:      #CFC4B8;
  --es-border-focus:     #8B1A2B;

  /* ── Status Colors ── */
  --es-success:          #16A34A;
  --es-success-bg:       #DCFCE7;
  --es-warning:          #D97706;
  --es-warning-bg:       #FEF3C7;
  --es-danger:           #DC2626;
  --es-danger-bg:        #FEE2E2;
  --es-info:             #0284C7;
  --es-info-bg:          #E0F2FE;

  /* ── Order Status Colors ── */
  --status-pending:      #D97706;
  --status-confirmed:    #0284C7;
  --status-preparing:    #7C3AED;
  --status-ready:        #059669;
  --status-delivered:    #16A34A;
  --status-cancelled:    #DC2626;
  --status-refunded:     #6B7280;

  /* ── Table Status Colors ── */
  --table-available:     #16A34A;
  --table-reserved:      #D97706;
  --table-occupied:      #DC2626;
  --table-cleaning:      #0284C7;
  --table-unavailable:   #6B7280;

  /* ── Typography ── */
  --es-font-heading:     'Playfair Display', Georgia, serif;
  --es-font-body:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --es-font-mono:        'Fira Code', 'Courier New', monospace;

  --es-text-xs:          0.75rem;
  --es-text-sm:          0.875rem;
  --es-text-base:        1rem;
  --es-text-lg:          1.125rem;
  --es-text-xl:          1.25rem;
  --es-text-2xl:         1.5rem;
  --es-text-3xl:         1.875rem;
  --es-text-4xl:         2.25rem;
  --es-text-5xl:         3rem;
  --es-text-6xl:         3.75rem;

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

  /* ── Radius ── */
  --es-radius-sm:        0.375rem;
  --es-radius-md:        0.75rem;
  --es-radius-lg:        1rem;
  --es-radius-xl:        1.5rem;
  --es-radius-full:      9999px;

  /* ── Shadows ── */
  --es-shadow-xs:        0 1px 2px rgba(0,0,0,0.06);
  --es-shadow-sm:        0 2px 8px rgba(0,0,0,0.08);
  --es-shadow-md:        0 4px 16px rgba(0,0,0,0.10);
  --es-shadow-lg:        0 8px 32px rgba(0,0,0,0.12);
  --es-shadow-xl:        0 16px 48px rgba(0,0,0,0.14);
  --es-shadow-primary:   0 4px 20px rgba(139,26,43,0.25);
  --es-shadow-card:      0 2px 12px rgba(44,36,22,0.08);

  /* ── Transitions ── */
  --es-transition-fast:  150ms ease;
  --es-transition-base:  250ms ease;
  --es-transition-slow:  400ms ease;

  /* ── Z-index ── */
  --es-z-dropdown:       1000;
  --es-z-sticky:         1020;
  --es-z-fixed:          1030;
  --es-z-modal-bg:       1040;
  --es-z-modal:          1050;
  --es-z-toast:          1060;
  --es-z-tooltip:        1070;

  /* ── Header ── */
  --es-header-height:    72px;
  --es-header-height-sm: 60px;

  /* ── Admin ── */
  --es-sidebar-width:    260px;
  --es-sidebar-collapsed: 72px;
}

/* ── Dark mode hint (not full implementation, for future) ── */
@media (prefers-color-scheme: dark) {
  /* reserved for dark mode override */
}