/* ======================================================
    TOKENS / VARIABLES (Frontend)

    Propósito:
    - Centraliza las variables CSS (colores, tipografías, tamaños,
       radios y sombras) que controlan la apariencia de TODO el
       frontend (páginas públicas). Cambiar estas variables
       actualizará rápidamente la paleta y tipografías del sitio.

    Uso:
    - Importar `tokens.css` antes de `base.css` y de los estilos
       específicos de cada vista. Ejemplo en las plantillas:
          <link rel="stylesheet" href="/css/tokens.css">
          <link rel="stylesheet" href="/css/base.css">
          <link rel="stylesheet" href="/css/home.css">

    Notas importantes:
    - NO editar aquí estilos específicos de backoffice. Los estilos
       del administrador están en `public/css/admin/`.
    - Mantén las variables con nombres descriptivos (`--primary-color`,
       `--font-family`, etc.) para facilitar el mantenimiento.
====================================================== */
:root {
   /* Paleta principal: tema oscuro (estética 'telo' - hostel transitorio) */
   --primary-color: #eaa6c0; /* acento rosa suave */
   --primary-dark: #d77fa2;
   --light-bg: #141217; /* fondo de cards / paneles */
   --dark-bg: #0b0b0d; /* fondo oscuro para modales y previews */
   --white: #ffffff;
   --text-dark: #f1e8eb; /* texto principal claro sobre fondo oscuro */
   --text-light: #cfc4ca; /* texto secundario */
   --border-color: rgba(255,255,255,0.06);
   --hero-bg-start: #0b0b0d;
   --hero-bg-end: #17151a;

  /* Tipografías */
  --font-family: 'Montserrat', sans-serif;
  --font-heading: 'Great Vibes', cursive;
  --font-size-base: 14px;
  --font-size-xl: 20px;
  --font-size-xxl: 28px;

  /* Botones y estados */
   --hero-button-bg: #d66b86;
   --hero-button-text: #ffffff;
  --success-color: #56c271;
  --warning-color: #ffbf69;
  --info-color: #74c0fc;

  /* Bordes y sombras */
   --border-radius: 14px;
   --shadow-light: 0 6px 20px rgba(0,0,0,.6);
   --shadow-medium: 0 12px 40px rgba(0,0,0,.7);

  /* Logo */
  --logo-size: 70px;
  --logo-zoom: 1.4;
}

/* Nota: Cambia estas variables para aplicar una nueva paleta o fuentes
   a TODO el frontend (no backoffice). */