/* ============================================
   FoodSelection Design Tokens
   Unified design system for consistent UX
   ============================================ */

:root {
  /* ==========================================
     Primary Brand Colors
     ========================================== */
  --fs-primary: #2563eb;           /* Primary blue - actions, focus states */
  --fs-primary-hover: #1d4ed8;     /* Darker blue for hover states */
  --fs-primary-active: #1e40af;    /* Even darker for active states */
  --fs-primary-light: #e0f2fe;     /* Light blue background - more visible */
  --fs-primary-bg: #bae6fd;        /* Medium blue background - better contrast */
  --fs-primary-border: #60a5fa;    /* Stronger blue border */
  
  /* ==========================================
     Secondary/Accent Colors
     ========================================== */
  --fs-accent: #f08a12;             /* Orange - secondary actions, highlights */
  --fs-accent-hover: #d97910;       /* Darker orange for hover */
  --fs-accent-light: #fff3e6;       /* Light orange background */
  --fs-accent-border: #ffc107;      /* Orange border */
  
  /* ==========================================
     Success/Error/Warning States
     ========================================== */
  --fs-success: #10b981;            /* Green for success states */
  --fs-success-light: #d1fae5;      /* Light green background */
  --fs-error: #ef4444;              /* Red for errors */
  --fs-error-light: #fee2e2;        /* Light red background */
  --fs-warning: #f59e0b;            /* Amber for warnings */
  --fs-warning-light: #fef3c7;      /* Light amber background */
  
  /* ==========================================
     Neutral Colors (Grays)
     ========================================== */
  --fs-text-primary: #1a1a1a;      /* Main text color */
  --fs-text-secondary: #6b7280;    /* Secondary text, placeholders */
  --fs-text-muted: #9ca3af;        /* Muted text, disabled states */
  --fs-text-inverse: #ffffff;      /* White text on dark backgrounds */
  
  /* ==========================================
     Background Colors
     ========================================== */
  --fs-bg-primary: #ffffff;        /* Main background */
  --fs-bg-secondary: #f8f9fa;      /* Secondary background */
  --fs-bg-tertiary: #f3f4f6;       /* Tertiary background */
  --fs-bg-hover: #f9fafb;          /* Hover background */
  --fs-bg-selected: #eff6ff;       /* Selected item background */
  
  /* ==========================================
     Border Colors
     ========================================== */
  --fs-border-default: #e5e7eb;    /* Default border */
  --fs-border-hover: #d1d5db;      /* Hover border */
  --fs-border-focus: #2563eb;      /* Focus border (primary color) */
  --fs-border-selected: #3b82f6;   /* Selected border */
  
  /* ==========================================
     Spacing System (4px base)
     ========================================== */
  --fs-spacing-xs: 4px;            /* Extra small spacing */
  --fs-spacing-sm: 8px;            /* Small spacing */
  --fs-spacing-md: 12px;           /* Medium spacing */
  --fs-spacing-lg: 16px;           /* Large spacing */
  --fs-spacing-xl: 20px;           /* Extra large spacing */
  --fs-spacing-2xl: 24px;          /* 2X large spacing */
  --fs-spacing-3xl: 32px;          /* 3X large spacing */
  --fs-spacing-4xl: 48px;          /* 4X large spacing */
  
  /* ==========================================
     Border Radius System
     ========================================== */
  --fs-radius-sm: 4px;             /* Small radius - inputs, small buttons */
  --fs-radius-md: 8px;             /* Medium radius - cards, containers */
  --fs-radius-lg: 12px;            /* Large radius - modals, large containers */
  --fs-radius-xl: 16px;            /* Extra large radius */
  --fs-radius-pill: 9999px;        /* Pill shape - tags, badges */
  
  /* ==========================================
     Typography Scale
     ========================================== */
  --fs-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  
  /* Font Sizes */
  --fs-font-size-xs: 0.75rem;      /* 12px - tiny text */
  --fs-font-size-sm: 0.875rem;     /* 14px - small text */
  --fs-font-size-base: 1rem;       /* 16px - body text */
  --fs-font-size-lg: 1.125rem;     /* 18px - large text */
  --fs-font-size-xl: 1.25rem;      /* 20px - headings */
  --fs-font-size-2xl: 1.5rem;      /* 24px - large headings */
  --fs-font-size-3xl: 1.875rem;    /* 30px - hero text */
  
  /* Font Weights */
  --fs-font-weight-normal: 400;
  --fs-font-weight-medium: 500;
  --fs-font-weight-semibold: 600;
  --fs-font-weight-bold: 700;
  
  /* Line Heights */
  --fs-line-height-tight: 1.25;
  --fs-line-height-normal: 1.5;
  --fs-line-height-relaxed: 1.75;
  
  /* ==========================================
     Transitions & Animations
     ========================================== */
  --fs-transition-fast: 150ms ease;
  --fs-transition-base: 200ms ease;
  --fs-transition-slow: 300ms ease;
  --fs-transition-slower: 500ms ease;
  
  /* Transition Properties */
  --fs-transition-colors: background-color var(--fs-transition-base), 
                          border-color var(--fs-transition-base), 
                          color var(--fs-transition-base);
  --fs-transition-transform: transform var(--fs-transition-base);
  --fs-transition-all: all var(--fs-transition-base);
  
  /* ==========================================
     Shadows (Elevation System)
     ========================================== */
  --fs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --fs-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --fs-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --fs-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --fs-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);
  
  /* Colored Shadows */
  --fs-shadow-primary: 0 4px 12px rgba(37, 99, 235, 0.25);
  --fs-shadow-accent: 0 4px 12px rgba(240, 138, 18, 0.25);
  
  /* ==========================================
     Z-Index Scale
     ========================================== */
  --fs-z-base: 0;
  --fs-z-dropdown: 1000;
  --fs-z-sticky: 1020;
  --fs-z-fixed: 1030;
  --fs-z-modal-backdrop: 1040;
  --fs-z-modal: 1050;
  --fs-z-popover: 1060;
  --fs-z-tooltip: 1070;
  
  /* ==========================================
     Component-Specific Tokens
     ========================================== */
  
  /* Input Fields */
  --fs-input-height: 45px;
  --fs-input-height-sm: 36px;
  --fs-input-height-lg: 52px;
  --fs-input-padding-x: var(--fs-spacing-lg);
  --fs-input-padding-y: var(--fs-spacing-md);
  --fs-input-border-width: 1px;
  --fs-input-focus-border-width: 2px;
  
  /* Buttons */
  --fs-button-padding-x: var(--fs-spacing-xl);
  --fs-button-padding-y: var(--fs-spacing-md);
  --fs-button-padding-x-sm: var(--fs-spacing-md);
  --fs-button-padding-y-sm: var(--fs-spacing-sm);
  --fs-button-padding-x-lg: var(--fs-spacing-2xl);
  --fs-button-padding-y-lg: var(--fs-spacing-lg);
  
  /* Food Tags */
  --fs-tag-padding-x: var(--fs-spacing-md);
  --fs-tag-padding-y: var(--fs-spacing-sm);
  --fs-tag-font-size: var(--fs-font-size-sm);
  
  /* Cards */
  --fs-card-padding: var(--fs-spacing-xl);
  --fs-card-padding-sm: var(--fs-spacing-lg);
  --fs-card-border-radius: var(--fs-radius-md);
  --fs-card-shadow: var(--fs-shadow-sm);
  
  /* Loading States */
  --fs-loading-overlay-bg: rgba(255, 255, 255, 0.9);
  --fs-loading-spinner-size: 40px;
  
  /* ==========================================
     Breakpoints (for reference in JS)
     ========================================== */
  --fs-breakpoint-xs: 0;
  --fs-breakpoint-sm: 576px;
  --fs-breakpoint-md: 768px;
  --fs-breakpoint-lg: 992px;
  --fs-breakpoint-xl: 1200px;
  --fs-breakpoint-2xl: 1400px;
  
  /* ==========================================
     Mobile-Specific Tokens
     ========================================== */
  --fs-mobile-tap-target: 48px;        /* Minimum touch target size */
  --fs-mobile-tap-target-sm: 44px;     /* Smaller touch targets */
  --fs-mobile-input-height: 48px;      /* Mobile input height */
  --fs-mobile-bottom-sheet-height: 85vh; /* Bottom sheet max height */
  --fs-mobile-action-bar-height: 64px;   /* Fixed bottom bar height */
  --fs-mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================
   Dark Mode Support (Future Enhancement)
   ========================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode tokens can be defined here when needed */
    /* Currently keeping light mode only for consistency */
  }
}

/* ==========================================
   Utility Classes Using Design Tokens
   ========================================== */

/* Text Colors */
.fs-text-primary { color: var(--fs-text-primary); }
.fs-text-secondary { color: var(--fs-text-secondary); }
.fs-text-muted { color: var(--fs-text-muted); }
.fs-text-accent { color: var(--fs-accent); }
.fs-text-primary-color { color: var(--fs-primary); }

/* Background Colors */
.fs-bg-primary { background-color: var(--fs-bg-primary); }
.fs-bg-secondary { background-color: var(--fs-bg-secondary); }
.fs-bg-accent-light { background-color: var(--fs-accent-light); }
.fs-bg-primary-light { background-color: var(--fs-primary-light); }

/* Spacing Utilities */
.fs-p-xs { padding: var(--fs-spacing-xs); }
.fs-p-sm { padding: var(--fs-spacing-sm); }
.fs-p-md { padding: var(--fs-spacing-md); }
.fs-p-lg { padding: var(--fs-spacing-lg); }
.fs-p-xl { padding: var(--fs-spacing-xl); }

.fs-m-xs { margin: var(--fs-spacing-xs); }
.fs-m-sm { margin: var(--fs-spacing-sm); }
.fs-m-md { margin: var(--fs-spacing-md); }
.fs-m-lg { margin: var(--fs-spacing-lg); }
.fs-m-xl { margin: var(--fs-spacing-xl); }

/* Border Radius Utilities */
.fs-rounded-sm { border-radius: var(--fs-radius-sm); }
.fs-rounded-md { border-radius: var(--fs-radius-md); }
.fs-rounded-lg { border-radius: var(--fs-radius-lg); }
.fs-rounded-pill { border-radius: var(--fs-radius-pill); }

/* Shadow Utilities */
.fs-shadow-sm { box-shadow: var(--fs-shadow-sm); }
.fs-shadow-md { box-shadow: var(--fs-shadow-md); }
.fs-shadow-lg { box-shadow: var(--fs-shadow-lg); }

/* Transition Utilities */
.fs-transition-colors { transition: var(--fs-transition-colors); }
.fs-transition-transform { transition: var(--fs-transition-transform); }
.fs-transition-all { transition: var(--fs-transition-all); }