/**
 * Central color system for Dine-flow.
 *
 * Brand palette:
 * - Deep restaurant background: #0d0500 / #1a0a00 / #2d1810
 * - Primary warm orange: #ff8c00
 * - Accent crimson: #dc143c
 *
 * Keep variable names stable. Many dashboard and table components consume
 * these tokens directly.
 */

:root {
  /* Brand colors */
  --primary: #ff8c00;
  --primary-rgb: 255, 140, 0;
  --primary-dark: #e67600;
  --primary-darker: #b95700;
  --primary-light: #ffa533;
  --primary-lighter: #ffc266;
  --primary-lightest: #fff1da;

  --accent: #dc143c;
  --accent-rgb: 220, 20, 60;
  --accent-dark: #a90f2e;
  --accent-light: #f05272;

  /* Dark restaurant theme */
  --bg-deep: #0d0500;
  --bg-base: #1a0a00;
  --bg-mid: #2d1810;
  --bg-card: rgba(45, 24, 16, 0.72);

  /* Light dashboard surfaces */
  --bg-white: #ffffff;
  --bg-light: #fff7ed;
  --bg-lighter: #fffaf3;
  --bg-gray: #f6efe6;
  --bg-disabled: #eadfd3;

  /* Text colors for light surfaces */
  --text-primary: #25160f;
  --text-secondary: #5e4635;
  --text-muted: #8c7462;
  --text-light: #c4a882;
  --text-placeholder: #ad9583;

  /* Text colors for dark surfaces */
  --text-on-dark: #f5e6d0;
  --text-on-dark-secondary: #c4a882;
  --text-on-dark-muted: #7a6050;
  --text-inverse: #1a0a00;

  /* Brand effects */
  --primary-soft: rgba(255, 140, 0, 0.14);
  --primary-light-bg: rgba(255, 140, 0, 0.08);
  --primary-hover-bg: rgba(255, 140, 0, 0.06);
  --primary-glow: rgba(255, 140, 0, 0.25);
  --primary-shadow: rgba(255, 140, 0, 0.32);
  --primary-focus-shadow: rgba(255, 140, 0, 0.18);
  --primary-focus-ring: rgba(255, 140, 0, 0.16);
  --accent-glow: rgba(220, 20, 60, 0.2);

  /* Borders */
  --border-color: #eadfd3;
  --border-light: #f5eadf;
  --border-subtle: rgba(255, 140, 0, 0.12);
  --border-focus: var(--primary);
  --border-hover: rgba(255, 140, 0, 0.35);

  /* States */
  --success: #22c55e;
  --success-light: #86efac;
  --danger: #dc143c;
  --danger-rgb: 220, 20, 60;
  --warning: #ffbf47;
  --info: #38bdf8;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(26, 10, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(26, 10, 0, 0.12);
  --shadow-lg: 0 18px 45px rgba(26, 10, 0, 0.16), 0 4px 14px rgba(255, 140, 0, 0.08);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 20px rgba(255, 140, 0, 0.2);
  --shadow-primary: 0 0 12px rgba(255, 140, 0, 0.48);
  --shadow-car: 0 2px 4px rgba(0, 0, 0, 0.2);

  /* Gradients */
  --gradient-page-bg: radial-gradient(ellipse at top, #2d1810 0%, var(--bg-base) 40%, var(--bg-deep) 100%);
  --gradient-sidebar: radial-gradient(ellipse at top, #2d1810 0%, var(--bg-base) 40%, var(--bg-deep) 100%);
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  --gradient-primary-hover: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-dark) 100%);
  --gradient-primary-soft: linear-gradient(135deg, rgba(255, 140, 0, 0.18) 0%, rgba(220, 20, 60, 0.12) 100%);
  --gradient-surface: linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);

  /* Sizing */
  --input-height-sm: 38px;
  --input-height-md: 40.5px;
  --input-height-lg: 46px;
  --border-radius: 8px;
  --border-radius-sm: 6px;
  --border-radius-lg: 10px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* Motion */
  --transition: 0.25s ease;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-smooth: 0.3s ease;

  /* Z-index layers */
  --z-dropdown: 1050;
  --z-dropdown-high: 10000;
  --z-sidebar: 1050;
  --z-header: 999;
  --z-footer: 999;
  --z-overlay: 1040;
}