/* Sistema visual de Antojo.
 *
 * Dos mundos a propósito:
 *   · El comensal: fondo cálido casi negro, para que la comida brille. Se
 *     queda oscuro en tema claro también, igual que un reproductor de video.
 *   · El restaurante: neutro frío con sesgo verde, denso, se opera de un vistazo.
 *
 * El acento es jade — el único tono frío en pantalla, así que no se pelea con
 * los cafés y rojos de la comida. Los estados van aparte del acento.
 */

:root {
  --bg: #F1F3F1;
  --surface: #FFFFFF;
  --surface-2: #E7EBE8;
  --ink: #16201C;
  --ink-muted: #5C6A64;
  --line: #D4DBD6;
  --line-soft: #E2E7E3;
  --accent: #0D8F6F;
  --accent-ink: #FFFFFF;
  --accent-soft: #DCF0E8;
  --shadow: 0 1px 2px rgba(20,32,28,.06), 0 8px 24px rgba(20,32,28,.08);

  --st-new: #B4780E;      --st-new-bg: #FBF0D8;
  --st-kitchen: #3C6FD1;  --st-kitchen-bg: #E1EAFB;
  --st-served: #4E7F3A;   --st-served-bg: #E4F0DC;
  --st-alert: #C0392B;    --st-alert-bg: #FBE3E0;

  /* ── El mundo del comensal ──
   *
   * Estas ocho las repinta el TEMA del restaurante: viven en `server/temas.js`,
   * viajan en la misma respuesta que ya trae la mesa y las aplica
   * `shared/tema.js`. Lo de acá abajo es el tema de fábrica — lo que ve un
   * restaurante al que todavía no se le cargó su marca.
   *
   * El fondo se queda oscuro también en tema claro, igual que un reproductor
   * de video: la comida es café, roja y dorada, y sobre negro cálido brilla.
   */
  --pbg: #14100E;
  --pbg-2: #1E1815;
  --pink: #F6EFE8;
  --pmuted: #A3958A;
  --pline: rgba(246,239,232,.14);
  --pacento: #35D6A4;
  /* El TEXTO encima del acento. No se deriva solo: blanco sobre un naranja de
     marca da 3.5:1 y no pasa AA para el texto de un botón. Cada tema trae la
     suya, siempre la versión muy oscura de su propio acento. */
  --pacento-tinta: #06231B;
  /* El dinero va aparte del acento a propósito: si el precio y el botón fueran
     del mismo color, el ojo no sabría a cuál de los dos ir. */
  --pprecio: #E0A33A;

  /* Nombre viejo del acento. Se conserva porque lo usan veinte reglas
     repartidas en tres hojas, y renombrarlas todas para ganar claridad no vale
     el riesgo de dejar una suelta. Apunta al nuevo: repintar --pacento las
     mueve todas. */
  --pjade: var(--pacento);

  /* Verde de "salió bien" para las pantallas oscuras (comanda lista, volvió la
     señal). NO es el acento aunque hasta ahora compartieran color: un estado
     significa lo mismo en todos los restaurantes y no lo repinta ningún tema.
     Un cliente que pudiera cambiarle el color a "listo" estaría comprando un
     bug. */
  --ok: #8FC46F;
  --ok-tinta: #0F2109;

  /* El acento en velo: bordes tenues, fondos de aviso, el pulso del "listo".
     Escritos a mano como respaldo para el Android viejo de un comensal, y
     recalculados abajo donde `color-mix` exista — que es donde de verdad
     siguen al tema. */
  /* El fondo en velo. Son las cortinas que van encima de las fotos de los
     platos para que el nombre y el precio se lean: tienen que ser del color
     del fondo del restaurante, o la foto queda con un halo de otro tono.
     Y `--pbg-hondo` es el marco de escritorio, un escalón más oscuro que la
     hoja, para que en una pantalla grande la app se vea como un celular. */
  --pbg-hondo: #0A0807;
  --pbg-50: rgba(20,16,14,.5);
  --pbg-60: rgba(20,16,14,.6);
  --pbg-70: rgba(20,16,14,.7);
  --pbg-90: rgba(20,16,14,.9);
  --pbg-95: rgba(20,16,14,.95);

  --pacento-07: rgba(53,214,164,.07);
  --pacento-12: rgba(53,214,164,.12);
  --pacento-16: rgba(53,214,164,.16);
  --pacento-30: rgba(53,214,164,.3);
  --pacento-40: rgba(53,214,164,.4);
  --pacento-50: rgba(53,214,164,.5);

  --font-display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1311; --surface: #161D1A; --surface-2: #1F2823;
    --ink: #E8EFEA; --ink-muted: #91A099; --line: #2B3632; --line-soft: #222C28;
    --accent: #35D6A4; --accent-ink: #06231B; --accent-soft: #123329;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --st-new: #E0A33A;     --st-new-bg: #342A12;
    --st-kitchen: #7BA5F0; --st-kitchen-bg: #17233B;
    --st-served: #8FC46F;  --st-served-bg: #1D2C17;
    --st-alert: #EE7C70;   --st-alert-bg: #381A17;
  }
}

:root[data-theme="dark"] {
  --bg: #0E1311; --surface: #161D1A; --surface-2: #1F2823;
  --ink: #E8EFEA; --ink-muted: #91A099; --line: #2B3632; --line-soft: #222C28;
  --accent: #35D6A4; --accent-ink: #06231B; --accent-soft: #123329;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --st-new: #E0A33A;     --st-new-bg: #342A12;
  --st-kitchen: #7BA5F0; --st-kitchen-bg: #17233B;
  --st-served: #8FC46F;  --st-served-bg: #1D2C17;
  --st-alert: #EE7C70;   --st-alert-bg: #381A17;
}

:root[data-theme="light"] {
  --bg: #F1F3F1; --surface: #FFFFFF; --surface-2: #E7EBE8;
  --ink: #16201C; --ink-muted: #5C6A64; --line: #D4DBD6; --line-soft: #E2E7E3;
  --accent: #0D8F6F; --accent-ink: #FFFFFF; --accent-soft: #DCF0E8;
  --shadow: 0 1px 2px rgba(20,32,28,.06), 0 8px 24px rgba(20,32,28,.08);
  --st-new: #B4780E;     --st-new-bg: #FBF0D8;
  --st-kitchen: #3C6FD1; --st-kitchen-bg: #E1EAFB;
  --st-served: #4E7F3A;  --st-served-bg: #E4F0DC;
  --st-alert: #C0392B;   --st-alert-bg: #FBE3E0;
}

/* Donde `color-mix` existe —casi todo desde 2023— el acento en velo se calcula
   del acento de verdad, así que sigue al tema del restaurante. Donde no, se
   quedan los rgba de arriba: se ven del color de fábrica, que es feo pero no
   rompe nada. Un borde tenue del tono equivocado no le impide a nadie pedir. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --pbg-hondo: color-mix(in srgb, var(--pbg) 72%, #000);
    --pbg-50: color-mix(in srgb, var(--pbg) 50%, transparent);
    --pbg-60: color-mix(in srgb, var(--pbg) 60%, transparent);
    --pbg-70: color-mix(in srgb, var(--pbg) 70%, transparent);
    --pbg-90: color-mix(in srgb, var(--pbg) 90%, transparent);
    --pbg-95: color-mix(in srgb, var(--pbg) 95%, transparent);

    --pacento-07: color-mix(in srgb, var(--pacento)  7%, transparent);
    --pacento-12: color-mix(in srgb, var(--pacento) 12%, transparent);
    --pacento-16: color-mix(in srgb, var(--pacento) 16%, transparent);
    --pacento-30: color-mix(in srgb, var(--pacento) 30%, transparent);
    --pacento-40: color-mix(in srgb, var(--pacento) 40%, transparent);
    --pacento-50: color-mix(in srgb, var(--pacento) 50%, transparent);
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }