/* ==========================================================================
   ILUEATS DESIGN SYSTEM TOKENS
   Theme: Warm Editorial Commerce
   Primary: #e64e0e
   Secondary: #6f625c
   Tertiary: #ede7e0
   Background: #fcfaf7
   Surface: #ffffff
   On-surface: #231512
   Muted: #8e7f77
   Border: #ede7e0
   Success: #1f9d55
   Warning: #f59e0b
   Error: #c2410c
   Typography: Bricolage Grotesque (display), Plus Jakarta Sans (body/labels)
   Radii: 5px (sm buttons), 16px (lg cards), 9999px (full pills)
   ========================================================================== */

/* -------------------------------------------------------------
   Font Definitions: Bricolage Grotesque & Plus Jakarta Sans
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Mode */
  color-scheme: light;

  /* Brand Colors */
  --c-primary: #008751;
  --c-primary-hover: #006b40;
  --c-primary-light: #10b981;
  --c-primary-dark: #064e3b;
  --c-primary-surface: #e8f7ee;    /* Mint cream tint */
  --c-accent: #008751;
  --c-accent-hover: #006b40;
  --c-accent-soft: #e8f7ee;
  --c-yellow: #f59e0b;
  --c-yellow-soft: #fffbeb;

  /* Surfaces & Backgrounds */
  --c-bg-canvas: #fcfaf7;          /* Soft warm cream background */
  --c-bg-surface: #ffffff;         /* Crisp White Cards */
  --c-bg-subtle: #f7f3ee;
  --c-bg-glass: rgba(252, 250, 247, 0.95);

  /* Typography Colors */
  --c-text-primary: #231512;       /* On-surface dark rich brown/charcoal */
  --c-text-secondary: #6f625c;     /* Neutral secondary brown-gray */
  --c-text-muted: #8e7f77;         /* Subtle descriptors / timestamps */
  --c-text-inverse: #ffffff;       /* Pure white on dark surfaces */

  /* Borders & Dividers */
  --c-border: #ede7e0;             /* Soft warm border */
  --c-border-subtle: #ede7e0;
  --c-border-secondary-btn: #ede7e0;
  --c-border-active: #008751;

  /* Status Colors */
  --c-success: #008751;
  --c-success-bg: #e8f7ee;
  --c-warning: #f59e0b;
  --c-warning-bg: #fffbeb;
  --c-error: #dc2626;
  --c-error-bg: #fef2f2;
  --c-info: #008751;
  --c-info-bg: #e8f7ee;

  /* Secondary accent */
  --c-secondary: #6f625c;
  --c-secondary-soft: #ede7e0;
  --c-tertiary: #ede7e0;

  /* Typography Families & Fallbacks */
  --font-family-fallbacks: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: 'Bricolage Grotesque', var(--font-family-fallbacks);
  --font-body: 'Plus Jakarta Sans', var(--font-family-fallbacks);

  /* Element Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 40px;

  /* Utility Spacing aliases */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* Shadows - Subtle soft shadow per specification */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-card: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-md: 0 4px 12px rgba(35, 21, 18, 0.06);
  --shadow-lg: 0 10px 24px -3px rgba(35, 21, 18, 0.08);
  --shadow-xl: 0 20px 32px -5px rgba(35, 21, 18, 0.1);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.02);
  --shadow-floating: 0 12px 36px rgba(35, 21, 18, 0.12);

  /* Border Radii: 5px sm buttons + 16px cards + 9999px pills */
  --radius-none: 0px;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-card: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --radius-pill: 9999px;

  /* Layout Consts */
  --nav-height: 72px;
  --bottom-bar-height: 68px;
  --max-width: 1280px;

  /* Transitions */
  --transition-snappy: 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-smooth: 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------
   Component Classes: Button Primary, Button Secondary, Card
   ------------------------------------------------------------- */
.btn-primary, .button-primary, .action-btn-primary {
  background-color: var(--c-primary) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important; /* 5px */
  padding: 10px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  min-width: 97px !important;
  min-height: 36px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 135, 81, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease, transform 0.15s ease, background-color 0.2s ease !important;
}
.btn-primary:hover, .button-primary:hover, .action-btn-primary:hover {
  background-color: var(--c-primary-hover) !important;
  opacity: 0.95 !important;
  transform: translateY(-1px) !important;
}

.btn-secondary, .button-secondary, .action-btn-secondary {
  background-color: transparent !important;
  color: var(--c-secondary) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-sm) !important; /* 5px */
  padding: 10px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  min-width: 97px !important;
  min-height: 36px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
.btn-secondary:hover, .button-secondary:hover, .action-btn-secondary:hover {
  background-color: var(--c-bg-subtle) !important;
  border-color: #cbd5e1 !important;
  color: var(--c-text-primary) !important;
}

.btn-link {
  background: transparent !important;
  color: var(--c-text-primary) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.btn-link:hover {
  color: var(--c-primary) !important;
  text-decoration: underline !important;
}

.card-ilueats, .card-heyfood {
  background-color: var(--c-bg-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important; /* 16px */
  padding: var(--space-lg) !important; /* 16px */
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px !important;
  color: var(--c-text-primary) !important;
}