/* ═══════════════════════════════════════════════════════════
   Design tokens — Valora Health
   La paleta se derivo de tailwind.config.js al migrar; ese fichero ya no existe.
   Sin build: esto es un fichero estatico servido tal cual.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Marca */
  --color-teal-50:  #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;

  /* Grupos personalizados de alimentos */
  --color-purple-50:  #f5f3ff;
  --color-purple-100: #ede9fe;
  --color-purple-200: #ddd6fe;
  --color-purple-400: #a78bfa;
  --color-purple-500: #8b5cf6;
  --color-purple-600: #7c3aed;
  --color-purple-700: #6d28d9;
  --color-purple-900: #4c1d95;

  /* Avisos */
  --color-amber-50:  #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;

  /* Neutros */
  --color-stone-50:  #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e3;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;

  /* Semanticos */
  --color-danger:  #dc2626;
  --color-success: #16a34a;
  --color-warning: #d97706;

  /* Superficies */
  --surface:      var(--color-stone-50);
  --surface-card: #ffffff;
  --ink:          var(--color-stone-800);
  --ink-muted:    var(--color-stone-500);
  --line:         var(--color-stone-200);

  /* Tipografia */
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", Menlo, monospace;

  --size-step--1: 0.75rem;
  --size-step-0:  0.875rem;
  --size-step-1:  1rem;
  --size-step-2:  1.125rem;
  --size-step-3:  1.5rem;

  /* Escala de espacio */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* Radios y sombra */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;
  --shadow-md: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);

  /* Blanco tactil minimo. Existe como TOKEN porque su ausencia ya costo:
     la clase que lo daba (w-11) no estaba en el CSS compilado y seis
     plantillas quedaron con botones sin ancho. Un token no se purga. */
  --tap-target: 2.75rem;
}