@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  /* Promoted Colors based on easeat requirements + Premium Modern Aesthetics */
  --color-primary: #2D9D6E;
  --color-primary-light: #4DC995;
  --color-primary-dark: #1F7A52;
  --color-primary-alpha: rgba(45, 157, 110, 0.15);
  
  --color-secondary: #F4845F;
  --color-secondary-light: #FFA184;
  --color-secondary-dark: #D4633C;
  --color-secondary-alpha: rgba(244, 132, 95, 0.15);

  /* Neutrals */
  --color-bg: #F4F7F6;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F8F9FA;
  
  --color-text: #1A1D1F;
  --color-text-muted: #6F767E;
  --color-border: #EFEFEF;
  --color-border-hover: #E1E1E1;

  /* States */
  --color-success: #198754;
  --color-danger: #ef476f;
  --color-warning: #ffd166;
  --color-info: #118ab2;

  /* Meal Type Colors */
  --color-desayuno: #FFD166;
  --color-almuerzo: #06D6A0;
  --color-cena: #118AB2;
  --color-snack: #EF476F;

  /* Meal Type Text (for contrasts) */
  --color-text-desayuno: #855C00;
  --color-text-almuerzo: #02664B;
  --color-text-cena: #07475E;
  --color-text-snack: #820D2A;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.08);
  --shadow-float: 0 10px 40px rgba(45, 157, 110, 0.3);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: blur(16px);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);

  /* Transitions & Animation Variables */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Outfit', var(--font-sans);
  
  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  --radius-circle: 50%;
}

/* Base resets based on variables */
body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .display-font {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Badge classes derived from meal colors */
.bg-desayuno { background-color: var(--color-desayuno) !important; color: var(--color-text-desayuno); }
.bg-almuerzo { background-color: var(--color-almuerzo) !important; color: var(--color-text-almuerzo); }
.bg-cena { background-color: var(--color-cena) !important; color: var(--color-text-cena); }
.bg-snack { background-color: var(--color-snack) !important; color: var(--color-text-snack); }

.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }