/* ======================================================
    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 */
  --primary-color: #e6cddf;
  --primary-dark: #c5a9d6;
  --light-bg: #ffffff;
  --white: #ffffff;
  --text-dark: #5c3c2e;
  --text-light: #7a5b55;
  --border-color: #e0d4e6;
  --hero-bg-start: #f5e4ec;
  --hero-bg-end: #f8dfe8;

  /* 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: #db8da5;
  --hero-button-text: #ffffff;
  --success-color: #56c271;
  --warning-color: #ffbf69;
  --info-color: #74c0fc;

  /* Bordes y sombras */
  --border-radius: 18px;
  --shadow-light: 0 2px 8px rgba(0,0,0,.06);
  --shadow-medium: 0 10px 24px rgba(0,0,0,.12);

  /* 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). */