/* =====================================================================
   LUMI · shared/tokens.css
   Sistema visual compartido por landing, /reservas y /admin.

   Paleta EXTRAÍDA por muestreo de píxeles de assets/Logo.jpg (1080×1350,
   16-ago-2026) — ya no es un cálculo a ojo. El degradé real de "Lumi" va
   salvia → coral → amarillo dorado → verde-agua; "playhouse" está en un
   tostado suave; el sol junto a la "i" es el mismo amarillo dorado, no
   naranjo (el afiche original de esta skill lo tenía mal). El lienzo del
   archivo del logo es gris neutro casi blanco (#F7F7F7) — no se usa como
   fondo del sitio porque es solo el lienzo de exportación, no una
   elección de marca; el crema cálido de --lumi-crema se mantiene como
   decisión de diseño aparte, a tono con la madera y luz cálida del local
   real (ver los videos de assets/Videos). Si cambia el archivo del logo,
   reemplazar los hex acá — las tres apps se actualizan solas.

   Tipografías: dos nada más (regla del diagnóstico de marca). "Baloo 2"
   para títulos — redondeada, cálida, hace eco de las letras del logo.
   "Nunito" para texto — legible en tablas y formularios sin perder calidez.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700&family=Nunito:wght@400;600;700&display=swap');

:root {
  /* --- paleta de marca (extraída de assets/Logo.jpg) --- */
  --lumi-crema:      #FAF6EE;   /* fondo cálido — diseñado, no extraído (ver nota arriba) */
  --lumi-verde:      #A4BF92;   /* salvia — inicio del degradé, trazo de la "L" */
  --lumi-verde-osc:  #6F8058;   /* variante oscura derivada, para texto/botones con contraste */
  --lumi-mostaza:    #F0DA4A;   /* amarillo dorado — sol junto a la "i" y tramo final del degradé */
  --lumi-coral:      #EF9F79;   /* coral — tramo de la "u" en el degradé */
  --lumi-verde-agua: #A3C4AD;   /* verde-agua — cierre del degradé en la "i", uso decorativo */
  --lumi-arena:      #C2B290;   /* tostado — color de "playhouse" en el logo */
  --lumi-texto:      #3A3530;   /* casi negro, tibio — diseñado para legibilidad (el logo no tiene texto oscuro) */
  --lumi-texto-sua:  #6B6357;

  /* --- roles semánticos, construidos sobre la paleta ---
     nota: --color-info usa --lumi-arena (no un verde) a propósito — el
     verde-agua extraído queda demasiado parecido al salvia de --color-exito
     para servir como una señal de estado distinta en la misma pantalla. */
  --color-fondo:      var(--lumi-crema);
  --color-superficie:  #FFFFFF;
  --color-borde:       #E5DDCC;
  --color-texto:       var(--lumi-texto);
  --color-texto-suave: var(--lumi-texto-sua);
  --color-primario:    var(--lumi-verde-osc);
  --color-acento:      var(--lumi-mostaza);
  --color-info:        var(--lumi-arena);
  --color-exito:       var(--lumi-verde);
  --color-alerta:      var(--lumi-coral);
  --color-error:       #C0604B;

  /* --- tipografía --- */
  --fuente-titulo: 'Baloo 2', system-ui, sans-serif;
  --fuente-texto:  'Nunito', system-ui, sans-serif;

  /* --- espaciado y forma --- */
  --radio:      14px;
  --radio-chico: 8px;
  --sombra:     0 2px 10px rgba(58, 53, 48, .08);
}

/* Tema oscuro automático — misma paleta, roles invertidos con cuidado
   de mantener el contraste; los tonos de marca (verde/mostaza) se
   mantienen para no perder identidad. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo:      #211E1A;
    --color-superficie: #2B2721;
    --color-borde:      #423C33;
    --color-texto:      #F3EFE6;
    --color-texto-suave: #C7BFAF;
    --color-primario:   var(--lumi-verde);
    --color-acento:     var(--lumi-mostaza);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
}
h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  margin: 0 0 .4em;
}
a { color: var(--color-primario); }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: none; border-radius: var(--radio-chico);
  padding: .6em 1.2em; cursor: pointer; text-decoration: none;
  font-family: var(--fuente-titulo); font-weight: 700;
  background: var(--color-primario); color: #fff;
}
.btn:hover { filter: brightness(1.08); }
.btn.secundario { background: transparent; color: var(--color-primario); border: 1.5px solid var(--color-primario); }
.btn.acento { background: var(--color-acento); color: var(--color-texto); }

.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.pastilla {
  display: inline-block; padding: .2em .7em; border-radius: 999px;
  font-size: .85rem; font-weight: 600;
}
.pastilla.disponible { background: color-mix(in srgb, var(--color-exito) 25%, transparent); color: var(--color-verde-osc, var(--color-primario)); }
.pastilla.lleno      { background: color-mix(in srgb, var(--color-error) 20%, transparent); color: var(--color-error); }