/* ==========================================================================
   Uber Eats Design System UI Tokens
   Visual Parity with Uber Eats App UI Kit (Node 27-10)
   ========================================================================== */

:root {
  /* Uber Eats Brand & Semantic Colors */
  --uber-green: #06C167;
  --uber-green-hover: #05A357;
  --uber-green-soft: #EBFBF2;
  --uber-green-border: #A3E7C3;
  --uber-black: #000000;
  --uber-dark: #141414;
  --uber-charcoal: #1F1F1F;
  
  /* Neutral Palette */
  --uber-gray-50: #F6F6F6;
  --uber-gray-100: #EEEEEE;
  --uber-gray-200: #E2E2E2;
  --uber-gray-300: #CCCCCC;
  --uber-gray-400: #9E9E9E;
  --uber-gray-500: #757575;
  --uber-gray-600: #545454;
  --uber-gray-700: #333333;
  --uber-gray-800: #262626;
  --uber-gray-900: #121212;
  --uber-white: #FFFFFF;

  /* Typography */
  --uber-font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --uber-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Border Radii */
  --uber-radius-xs: 4px;
  --uber-radius-sm: 8px;
  --uber-radius-md: 12px;
  --uber-radius-lg: 16px;
  --uber-radius-xl: 24px;
  --uber-radius-pill: 9999px;

  /* Elevation & Shadows */
  --uber-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --uber-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05);
  --uber-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.06);
  --uber-shadow-float: 0 8px 28px rgba(0, 0, 0, 0.20);
  --uber-shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.16);

  /* Touch Targets & Layout */
  --uber-touch-min: 44px;
  --uber-header-height: 64px;
  --uber-sticky-offset: 64px;

  /* Default Customer Overrides for Seamless Uber Parity */
  --color-primary: #000000;
  --color-primary-hover: #1f1f1f;
  --color-primary-soft: #ebfbf2;
  --color-success: #06c167;
}

/* Dark Mode Tokens */
[data-theme="dark"] {
  --uber-black: #FFFFFF;
  --uber-dark: #121212;
  --uber-charcoal: #1F1F1F;
  --uber-gray-50: #1F1F1F;
  --uber-gray-100: #2A2A2A;
  --uber-gray-200: #383838;
  --uber-gray-300: #4B4B4B;
  --uber-gray-400: #757575;
  --uber-gray-500: #A6A6A6;
  --uber-gray-600: #CCCCCC;
  --uber-gray-700: #E2E2E2;
  --uber-gray-800: #EEEEEE;
  --uber-gray-900: #F6F6F6;
  --uber-white: #121212;

  --uber-green-soft: rgba(6, 193, 103, 0.15);
  --uber-green-border: rgba(6, 193, 103, 0.35);

  --uber-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.40);
  --uber-shadow-float: 0 8px 28px rgba(0, 0, 0, 0.60);
  --uber-shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.65);
}

/* Shared staff UI foundation */
[data-ui="staff"] {
  --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ui-bg: #f6f7f9;
  --ui-surface: #ffffff;
  --ui-border: #d5dbe3;
  --ui-text: #17212f;
  --ui-muted: #526174;
  --ui-primary: #176b47;
  --ui-primary-hover: #105236;
  --ui-focus: #245edb;
  --ui-success: #176b47;
  --ui-success-bg: #e7f4ed;
  --ui-warning: #865000;
  --ui-warning-bg: #fff2d5;
  --ui-danger: #b42318;
  --ui-danger-bg: #ffebe9;
  --ui-info: #245edb;
  --ui-info-bg: #eaf0ff;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-radius-sm: 6px;
  --ui-radius-md: 10px;
  --ui-radius-lg: 14px;
  --ui-text-sm: 0.875rem;
  --ui-text-md: 1rem;
  --ui-text-lg: 1.25rem;
  --ui-text-xl: 1.75rem;
  --ui-control-height: 44px;
  --ui-content-width: 1200px;
}
[data-ui="staff"][data-theme="dark"] {
  --ui-bg: #101722;
  --ui-surface: #192332;
  --ui-border: #435168;
  --ui-text: #f5f7fb;
  --ui-muted: #b5c1d2;
  --ui-primary: #87d9ac;
  --ui-primary-hover: #a4e4c0;
  --ui-success: #87d9ac;
  --ui-success-bg: #16392b;
  --ui-warning: #ffd080;
  --ui-warning-bg: #40301a;
  --ui-danger: #ffaaa3;
  --ui-danger-bg: #452322;
  --ui-info: #abc4ff;
  --ui-info-bg: #233454;
  --ui-focus: #abc4ff;
}