/* Restaurant Interface Design System - New 14-Color System
 * Updated: November 14, 2025
 * Purpose: Unified design system with 14 semantic colors, dark mode support, and modern components
 */

:root {
  /* === 14-Color System === */

  /* Backgrounds (3 colors) */
  --bg-dark: hsl(220 13% 18%);
  --bg: hsl(0 0% 100%);
  --bg-light: hsl(210 20% 98%);

  /* Text (2 colors) */
  --text: hsl(220 13% 18%);
  --text-muted: hsl(220 9% 46%);

  /* UI Elements (3 colors) */
  --highlight: hsl(221 39% 51%);
  --border: hsl(220 13% 91%);
  --border-muted: hsl(220 13% 95%);

  /* Primary Action (1 color) */
  --primary: hsl(22 87% 51%); /* Orange - Progressive actions */

  /* Semantic Colors (5 colors) */
  --secondary: hsl(220 9% 46%); /* Gray - Safe reversals */
  --success: hsl(142 41% 55%); /* Green */
  --warning: hsl(38 54% 62%); /* Yellow */
  --danger: hsl(0 50% 58%); /* Red - Destructive actions */
  --info: hsl(221 39% 51%); /* Indigo/Blue - Exploratory actions */

  /* === Derived Colors (for consistency) === */

  /* Light variants for badges and backgrounds */
  --primary-light: hsl(22 87% 95%);
  --secondary-light: hsl(220 9% 95%);
  --success-light: hsl(142 41% 95%);
  --warning-light: hsl(38 54% 95%);
  --danger-light: hsl(0 50% 95%);
  --info-light: hsl(221 39% 95%);

  /* Dark variants for hover states */
  --primary-dark: hsl(22 87% 40%);
  --secondary-dark: hsl(220 9% 35%);
  --success-dark: hsl(142 41% 45%);
  --warning-dark: hsl(38 54% 50%);
  --danger-dark: hsl(0 50% 48%);
  --info-dark: hsl(221 39% 40%);

  /* Additional utility colors */
  --bg-stripe: hsl(0 0% 98%); /* Zebra striping */
  --bg-hover: hsl(0 0% 96%); /* Hover state background */

  /* === Spacing Scale === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* === Border Radius === */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.2);

  /* === Typography Scale === */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-xxl: 1.5rem;    /* 24px */
  --font-size-xxxl: 2rem;     /* 32px */

  /* === Font Weights === */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* === Line Heights === */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

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

  /* === Animation === */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0.0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);

  /* === Legacy Compatibility Layer === */
  /* Maps old --resi-* variables to new design system */
  /* TODO: Remove after all pages migrated to new system */

  /* Colors */
  --resi-primary: var(--primary);
  --resi-primary-dark: var(--primary-dark);
  --resi-accent: var(--primary);
  --resi-accent-beige: #E2C6BB;
  --resi-accent-beige-80: rgba(226, 198, 187, 0.8);
  --resi-accent-beige-40: rgba(226, 198, 187, 0.4);
  --resi-accent-beige-30: rgba(226, 198, 187, 0.3);
  --resi-accent-beige-20: rgba(226, 198, 187, 0.2);

  /* Backgrounds */
  --resi-bg-primary: var(--bg-light);
  --resi-bg-surface: var(--bg);
  --resi-bg-card: var(--bg);
  --resi-bg-secondary: var(--bg-light);
  --resi-bg-muted: var(--border-muted);

  /* Text */
  --resi-text-primary: var(--text);
  --resi-text-secondary: var(--text-muted);
  --resi-text-tertiary: var(--text-muted);
  --resi-text-dark: var(--text);
  --resi-text-on-primary: #FFFFFF;
  --resi-text-on-dark: #FFFFFF;
  --resi-text-muted: var(--text-muted);

  /* Semantic colors */
  --resi-success: var(--success);
  --resi-warning: var(--warning);
  --resi-error: var(--danger);
  --resi-info: var(--info);
  --resi-draft: var(--secondary);

  /* Light variants */
  --resi-success-light: var(--success-light);
  --resi-warning-light: var(--warning-light);
  --resi-error-light: var(--danger-light);
  --resi-info-light: var(--info-light);
  --resi-draft-light: var(--secondary-light);

  /* Additional legacy variables */
  --resi-border-width: 1px;
  --resi-border-color: var(--border);
  --resi-radius-sm: var(--radius-sm);
  --resi-radius-md: var(--radius-md);
  --resi-radius-lg: var(--radius-lg);
  --resi-shadow-sm: var(--shadow-sm);
  --resi-shadow-md: var(--shadow-md);
  --resi-shadow-lg: var(--shadow-lg);
}

/* === Dark Mode Override (Class-based) === */
body.dark-mode,
[data-theme="dark"] {
  /* Backgrounds */
  --bg-dark: hsl(0 0% 100%);
  --bg: hsl(220 13% 18%);
  --bg-light: hsl(220 13% 22%);

  /* Text */
  --text: hsl(0 0% 95%);
  --text-muted: hsl(220 9% 65%);

  /* UI Elements */
  --highlight: hsl(221 39% 65%);
  --border: hsl(220 13% 30%);
  --border-muted: hsl(220 13% 25%);

  /* Primary stays the same (orange works in dark mode) */

  /* Semantic colors stay the same (work in dark mode) */

  /* Light variants become darker in dark mode */
  --primary-light: hsl(22 87% 25%);
  --secondary-light: hsl(220 9% 25%);
  --success-light: hsl(142 41% 25%);
  --warning-light: hsl(38 54% 25%);
  --danger-light: hsl(0 50% 25%);
  --info-light: hsl(221 39% 25%);

  /* Dark variants become lighter in dark mode */
  --primary-dark: hsl(22 87% 60%);
  --secondary-dark: hsl(220 9% 60%);
  --success-dark: hsl(142 41% 65%);
  --warning-dark: hsl(38 54% 70%);
  --danger-dark: hsl(0 50% 65%);
  --info-dark: hsl(221 39% 60%);

  /* Shadows appear lighter in dark mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.5);

  /* Additional utility colors for dark mode */
  --bg-stripe: hsl(220 13% 20%); /* Darker zebra striping */
  --bg-hover: hsl(220 13% 24%); /* Darker hover state */
}

/* === Media Query Dark Mode (System Preference) === */
/* Note: Disabled to allow manual toggle control via dark-mode-toggle.js */
/* Users can manually toggle dark mode regardless of system preference */
/*
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light-mode) {
    --bg-dark: hsl(0 0% 100%);
    --bg: hsl(220 13% 18%);
    --bg-light: hsl(220 13% 22%);
    --text: hsl(0 0% 95%);
    --text-muted: hsl(220 9% 65%);
    --highlight: hsl(221 39% 65%);
    --border: hsl(220 13% 30%);
    --border-muted: hsl(220 13% 25%);
    --primary-light: hsl(22 87% 25%);
    --secondary-light: hsl(220 9% 25%);
    --success-light: hsl(142 41% 25%);
    --warning-light: hsl(38 54% 25%);
    --danger-light: hsl(0 50% 25%);
    --info-light: hsl(221 39% 25%);
    --primary-dark: hsl(22 87% 60%);
    --secondary-dark: hsl(220 9% 60%);
    --success-dark: hsl(142 41% 65%);
    --warning-dark: hsl(38 54% 70%);
    --danger-dark: hsl(0 50% 65%);
    --info-dark: hsl(221 39% 60%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
}
*/

/* === High Contrast Mode === */
@media (prefers-contrast: high) {
  :root {
    --border: hsl(220 13% 70%);
    --border-muted: hsl(220 13% 80%);
  }

  body.dark-mode,
  [data-theme="dark"] {
    --border: hsl(220 13% 40%);
    --border-muted: hsl(220 13% 35%);
  }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}