/**
 * Um Khater Restaurant Theme Variables
 * Brand Colors for Restaurant Order System
 * 
 * @package HelloElementorChild
 * @since 2.0.0
 * @description Brand color system replacing old donation theme colors
 * 
 * Migration Log:
 * - Old Primary: #3271B9 (Blue) → New: #7E4E24 (Brown)
 * - Old Secondary: #009A49 (Green) → New: #E8A972 (Accent Beige)
 * - Added: #000000 (Black) for text/dark elements
 */

:root {
  /* === Primary Brand Colors === */
  --brand-primary: #7E4E24;        /* Main brown - buttons, links, highlights */
  --brand-accent: #E8A972;         /* Accent beige - secondary actions, borders */
  --brand-dark: #000000;           /* Black - text, icons, emphasis */
  
  /* === Functional Color Palette === */
  --color-white: #ffffff;
  --color-light-bg: #f8fafc;       /* Light backgrounds */
  --color-light-gray: #f1f5f9;     /* Subtle backgrounds */
  --color-gray: #e2e8f0;           /* Borders, dividers */
  --color-medium-gray: #d1d5db;    /* Input borders */
  --color-dark-gray: #64748b;      /* Secondary text */
  --color-text: #1e293b;           /* Primary text */
  --color-text-secondary: #374151; /* Secondary darker text */
  --color-text-muted: #555555;     /* Muted text */
  
  /* === Status Colors === */
  --color-success: #10b981;        /* Success states */
  --color-success-light: #ecfdf5;  /* Success backgrounds */
  --color-success-dark: #047857;   /* Success text */
  --color-error: #ef4444;          /* Error states */
  --color-error-light: #fef2f2;    /* Error backgrounds */
  --color-error-dark: #dc2626;     /* Error text */
  --color-info: #3b82f6;           /* Info states */
  --color-info-light: #f0f9ff;     /* Info backgrounds */
  --color-info-dark: #1e40af;      /* Info text */
  
  /* === Gradient Combinations === */
  --gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
  --gradient-primary-reverse: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
  --gradient-light: linear-gradient(145deg, var(--color-white) 0%, #f8fbff 100%);
  --gradient-subtle: linear-gradient(45deg, #f0f4f8, #e8f2ff);
  
  /* === Spacing System === */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  
  /* === Border Radius === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* === Shadows === */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(126, 78, 36, 0.12);
  --shadow-lg: 0 8px 24px rgba(126, 78, 36, 0.15);
  --shadow-hover: 0 12px 32px rgba(126, 78, 36, 0.2);
  
  /* === Typography === */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: inherit;
  
  /* === Transitions === */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* === Z-Index Scale === */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* === Usage Examples ===
.button-primary {
  background: var(--brand-primary);
  color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.button-primary:hover {
  background: var(--brand-accent);
  box-shadow: var(--shadow-hover);
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}
*/