/* ============================================================================
   tokens.css — Identidad de marca. ÚNICO punto de reskin del portal.
   Marca: CHE ALIMENTOS. Derivada del logo (sello negro, condensado, audaz) y del
   sitio chealimentos.com: monocromática (negro sobre blanco), minimalista, sans
   moderna. Se suma un fondo papel cálido (guiño al mundo Oatly/avena) para que el
   monocromo no quede frío. El color funcional (ok/atención/error) es señal, no
   identidad; cada marca de producto (Oatly / Moving) tiene un acento de categoría
   usado solo en el catálogo y el tablero.
   ========================================================================== */

:root {
  /* --- Tinta de marca (el negro del logo) --- */
  --che-tinta:   #161513;   /* casi negro, cálido */
  --che-negro:   #000000;
  --che-papel:   #F4F1EA;   /* fondo papel cálido */
  --che-crema:   #FBF9F4;   /* superficie alterna */

  /* --- Tipografía: sans moderna del sistema (sin webfont, autocontenido) ---
     Usa la del SO (San Francisco / Segoe UI / Roboto). Si más adelante se quiere
     fijar una sola cara cross-OS, se empaqueta un .woff2 local con @font-face. --- */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-titulo: var(--fuente);

  /* --- Alias semánticos que usa la app --- */
  --brand:        var(--che-tinta);
  --brand-strong: #000000;
  --brand-deep:   #000000;
  --brand-ink:    var(--che-tinta);

  --marca-nombre: "Che Alimentos";

  /* Tintes cálidos derivados (fondos suaves de "marca" en estado activo/hover) */
  --brand-050: #F0EBE0;
  --brand-100: #E6DECF;
  --brand-200: #D8CDB8;

  /* --- Superficies y texto --- */
  --bg:          var(--che-papel);
  --surface:     #FFFFFF;
  --surface-alt: var(--che-crema);
  --ink:         #1A1813;
  --ink-soft:    #4F4A40;
  --ink-mute:    #8A8275;
  --border:      #E4DDCF;
  --border-soft: #EFEADF;

  /* --- Colores funcionales de estado (señal) --- */
  --ok:        #2F7D5B;
  --ok-bg:     #E6F1EA;
  --warn:      #B0791E;
  --warn-bg:   #F8EFDC;
  --danger:    #B23B2E;
  --danger-bg: #F6E5E1;
  --info:      #3D4A52;
  --info-bg:   #ECEFF0;

  /* --- Acentos de categoría por marca de producto --- */
  --oatly:  #B08740;   /* avena / cálido */
  --oatly-bg: #F3EBD9;
  --moving: #1F8E8A;   /* bebida / fresco */
  --moving-bg: #DDF0EE;

  /* --- Radios (boxy, guiño al sello del logo), sombras, medidas --- */
  --r-sm: 4px;
  --r:    7px;
  --r-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(30,26,18,.06);
  --shadow:    0 4px 16px rgba(30,26,18,.09);
  --shadow-lg: 0 14px 38px rgba(30,26,18,.16);

  --nav-h: 62px;
  --side-w: 236px;
  --maxw: 1200px;
}