/* Identidad visual compartida por las 4 pantallas (cliente, cocina, mesero, caja).
 *
 * La paleta sale del local real de La Botanica (@botanica.bo): selva interior,
 * lamparas de rattan con luz ambar, madera y vegetacion sobre fondo oscuro.
 * De ahi el verde follaje, el ambar de la luz calida y la terracota de su
 * vajilla. Un solo archivo para no repetir los mismos colores cuatro veces y
 * para que el tema cambie en un lugar cuando sea otro restaurante.
 *
 * Dos superficies, segun donde se usa cada pantalla:
 *   - clara (default): mesero, caja y admin, que se usan con luz.
 *   - oscura (`body.tema-oscuro`): el menu del cliente, que se mira desde una
 *     mesa con poca luz. Una pantalla blanca encandila y rompe el ambiente.
 *
 * ponytail: tokens CSS planos, sin build ni preprocesador — el proyecto no
 * tiene tooling de frontend a proposito. Si algun dia hay varios restaurantes
 * con marca propia, esto pasa a servirse por restaurante desde el backend.
 */

:root {
  /* Marca */
  --verde: #1d4535;
  --verde-claro: #35705a;
  --verde-suave: #e7efe9;
  --terracota: #bf5f3a;
  --terracota-suave: #fbeee8;
  --ambar: #d79a3c;
  --ambar-suave: #fdf4e4;

  /* Superficies (claras) */
  --fondo: #f6f4ef;
  --superficie: #ffffff;
  --borde: #e4ded4;
  --tinta: #221f1a;
  --tinta-suave: #6a635a;
  --tinta-tenue: #99928a;

  /* Estados (mismos significados en cocina, mesero y caja) */
  --ok: #1f7a4d;
  --ok-suave: #e3f3ea;
  --espera: #b4790f;
  --espera-suave: #fdf3e0;
  --alerta: #b4342a;
  --alerta-suave: #fbe9e7;
  --info: #2b5f8f;
  --info-suave: #e7eff7;

  /* Tipografia: display serif para nombres de plato y titulos, sans para el
     resto. La serif carga de Google Fonts con fallback a Georgia. */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --texto: system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-chico: 8px;
  --r: 12px;
  --r-grande: 18px;
  --sombra: 0 1px 3px rgba(35, 32, 28, 0.08), 0 1px 2px rgba(35, 32, 28, 0.04);
  --sombra-alta: 0 8px 24px rgba(35, 32, 28, 0.16);
}

/* Superficie oscura para el menu del cliente: fondo de madera oscura, tarjetas
   apenas mas claras y el ambar de las lamparas como acento. Los verdes se
   aclaran porque el verde follaje sobre negro no tiene contraste suficiente. */
body.tema-oscuro {
  --fondo: #17140f;
  --superficie: #221e18;
  --superficie-alta: #2b261f;
  --borde: #3a332a;
  --tinta: #f3eee5;
  --tinta-suave: #b5ab9c;
  --tinta-tenue: #8a8172;
  --verde: #6fae8f;
  --verde-claro: #8cc4a7;
  --verde-suave: #223028;
  --ok: #7ec79b;
  --ok-suave: #1e2f26;
  --espera: #e0ab54;
  --espera-suave: #33291a;
  --alerta: #e88a80;
  --alerta-suave: #331f1d;
}

* { box-sizing: border-box; }

body {
  font-family: var(--texto);
  background: var(--fondo);
  color: var(--tinta);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Solo tokens y la base tipografica. Los componentes compartidos que habia
   aca (.barra, .btn*, .badge*, .panel, .ws, .nota) eran codigo muerto: cada
   pantalla define los suyos, y `.barra` incluso colisionaba con la barra de
   macros del cliente y la rompia. Si algo se repite de verdad en las cinco
   pantallas, vuelve aca; antes no. */

h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }