:root {
  /* Paleta principal - Coral cálido (dominante 60%) */
  --color-primary: #e07b5c;
  --color-primary-dark: #c9624a;
  --color-primary-light: #f2a890;
  --color-primary-bg: rgba(224, 123, 92, 0.1);

  /* Secundario - Sage green (30%) */
  --color-secondary: #6da58e;
  --color-secondary-dark: #558b76;
  --color-secondary-light: #a2ccbb;

  /* Acento - Lavanda suave (10%) */
  --color-accent: #9b82c0;
  --color-accent-dark: #7f68a4;
  --color-accent-light: #c4b5db;

  /* Semánticos - versiones suaves */
  --color-success: #6bbe86;
  --color-success-bg: rgba(107, 190, 134, 0.12);
  --color-warning: #e8ac4e;
  --color-warning-bg: rgba(232, 172, 78, 0.12);
  --color-danger: #d96b6b;
  --color-danger-dark: #c04f4f;
  --color-danger-bg: rgba(217, 107, 107, 0.12);
  --color-info: #5ea8d0;
  --color-info-bg: rgba(94, 168, 208, 0.12);

  /* Fondos - tintados cálidos */
  --color-bg: #fffbf8;
  --color-bg-secondary: #fff5ee;
  --color-bg-tertiary: #ffede3;

  /* Texto - tonos cálidos */
  --color-text: #3a302c;
  --color-text-secondary: #7a6e6a;
  --color-text-tertiary: #a89e9a;

  /* Bordes - tintados cálidos */
  --color-border: #ede4dd;
  --color-border-dark: #ddd1c9;

  /* Espaciado */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Tipografía */
  --font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  /* Bordes redondeados - más generosos para soft feel */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  /* Sombras - tintadas cálidas */
  --shadow-sm: 0 1px 3px 0 rgba(90, 60, 40, 0.06);
  --shadow-md: 0 4px 8px -1px rgba(90, 60, 40, 0.08), 0 2px 4px -2px rgba(90, 60, 40, 0.06);
  --shadow-lg: 0 10px 20px -3px rgba(90, 60, 40, 0.10), 0 4px 8px -4px rgba(90, 60, 40, 0.06);

  /* Transiciones */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-index */
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* Categorías de producto - paleta pastel */
  --color-cat-fruit: #f0c87a;
  --color-cat-dairy: #a0cce8;
  --color-cat-meat: #e8a0a0;
  --color-cat-bakery: #dbb89a;
  --color-cat-veggies: #90c9a0;
  --color-cat-frozen: #a8c8e8;
  --color-cat-drinks: #c8a8d8;
  --color-cat-cleaning: #8cc8c8;
  --color-cat-other: #c8beb5;
}

/* Dark mode - tonos cálidos oscuros */
:root.dark {
  --color-primary: #e8896c;
  --color-primary-dark: #d4704f;
  --color-primary-light: #f2a890;
  --color-primary-bg: rgba(232, 137, 108, 0.15);

  --color-secondary: #7db89e;
  --color-secondary-dark: #6aa48a;
  --color-secondary-light: #a2ccbb;

  --color-accent: #ab92d0;
  --color-accent-light: #c4b5db;

  --color-bg: #1e1815;
  --color-bg-secondary: #2a2320;
  --color-bg-tertiary: #38302b;

  --color-text: #f5ece7;
  --color-text-secondary: #b0a59e;
  --color-text-tertiary: #7a706a;

  --color-border: #3d342e;
  --color-border-dark: #504540;

  --color-success: #7dcc96;
  --color-success-bg: rgba(125, 204, 150, 0.15);
  --color-warning: #f0bc6a;
  --color-warning-bg: rgba(240, 188, 106, 0.15);
  --color-danger: #e07e7e;
  --color-danger-dark: #c05e5e;
  --color-danger-bg: rgba(224, 126, 126, 0.15);
  --color-info: #70b4d8;
  --color-info-bg: rgba(112, 180, 216, 0.15);

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.40), 0 4px 8px -4px rgba(0, 0, 0, 0.25);
}