/* ====================================================================
 * Sistema de diseño de Tribusfera — única fuente de verdad
 * ====================================================================
 *
 * Lo cargan el dashboard del kiosk (/kiosk/) y el panel de familia
 * (/admin/). Antes cada uno tenía su propia copia de la paleta y las dos
 * derivaron respecto a la web pública; de ahí que ahora esté aquí y solo
 * aquí.
 *
 * Los valores vienen de la landing de marketing, guardada tal cual en
 * `frontend/referencia/lovable-styles-original.css`. Si la landing cambia,
 * se actualiza ese fichero y desde él se propaga aquí. No al revés.
 *
 * ------------------------------------------------------------------
 * SOBRE LOS CONTRASTES
 * ------------------------------------------------------------------
 * Cuatro tokens de la landing no pasan WCAG AA en los usos que les da la
 * app, y están corregidos con la mezcla MÍNIMA que hace falta:
 *
 *   --muted-foreground #7c746a  4.42:1 sobre el fondo — se oscurece un 4%.
 *   ocre como texto     #d4af37  1.93:1 — un dorado no puede ser texto sobre
 *                                claro. Hay variante aparte para texto.
 *   arcilla como texto  #c95b3c  3.83:1 — se usa el --destructive que la
 *                                propia landing ya trae.
 *   blanco sobre ocre            2.10:1 — la inicial de un avatar dorado va
 *                                en tinta, no en blanco. Lo decide el JS por
 *                                luminancia, así que vale para cualquier
 *                                color que el admin elija.
 *
 * La landing no trae paleta oscura, así que la de noche está derivada
 * aclarando los colores base hasta que pasan sobre el fondo pizarra. Todos
 * los pares están comprobados con números: ver el bloque de comentarios al
 * final de este fichero.
 * ==================================================================== */

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

:root {
  /* --------------------------------------------------- superficies */
  --bg: #fcfaf7;              /* blanco roto cálido (--background) */
  --bg-panel: #f8f5f1;        /* tarjetas y bloques (--secondary/--muted) */
  --bg-card: #ffffff;         /* (--card) */

  /* -------------------------------------------------------- tinta */
  --ink: #1a2e35;             /* tinta azul-pizarra (--foreground) */
  --ink-soft: #776f66;        /* #7c746a de la landing, -4% para pasar AA */

  /* ------------------------------------------------------- líneas */
  --line: #e8e2d9;            /* (--border) */
  --line-input: #d9d1c5;      /* (--input) */

  /* ------------------------------------------ paleta de azulejo */
  /* Estos son para RELLENOS: fondos de botón, avatares, badges, bordes. */
  --azulejo: #1a4568;         /* azul majólica profundo */
  --azulejo-deep: #123049;
  --arcilla: #c95b3c;         /* terracota viva */
  --salvia: #2e6b5e;          /* verde salvia profundo */
  --ocre: #d4af37;            /* ocre dorado */

  /* Y estos para TEXTO sobre fondo claro. No son un capricho: el ocre
   * dorado como texto da 1.93:1, ilegible. */
  --azulejo-texto: #1a4568;   /* 9.62:1 — vale tal cual */
  --arcilla-texto: #b23a2b;   /* el --destructive de la landing, 5.47:1 */
  --salvia-texto: #2e6b5e;    /* 5.72:1 — vale tal cual */
  --ocre-texto: #866e23;      /* dorado oscurecido, 4.53:1 */

  /* Texto que va encima de un relleno de la paleta. */
  --sobre-azulejo: #ffffff;   /* 10.02:1 */
  /* El badge del contador de correo usa `--arcilla-texto` como FONDO (es la
   * variante que contrasta en cada tema) y esto como tinta encima. En dia
   * blanco sobre terracota oscura, de noche tinta sobre terracota clara. */
  --sobre-arcilla: #ffffff;   /* 5.94:1 sobre --arcilla-texto */

  /* ---------------------------------------------------- tipografía */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

/* ==================================================================
 * NOCHE
 * ==================================================================
 * El fondo es el `--pizarra` de la landing (#1a2e35), que es el mismo
 * valor que su tinta de día. Los colores de la paleta se aclaran: el
 * azulejo #1a4568 sobre pizarra da 1.4:1, invisible.
 */
[data-theme="noche"] {
  --bg: #1a2e35;              /* (--pizarra) */
  --bg-panel: #2c3f45;
  --bg-card: #2c3f45;

  --ink: #f1ede6;             /* 12.11:1 sobre el fondo */
  --ink-soft: #a2acaf;        /* 6.09:1 sobre el fondo, 4.76:1 sobre panel */

  --line: rgba(241, 237, 230, 0.14);
  --line-input: rgba(241, 237, 230, 0.22);

  --azulejo: #98abbb;
  --azulejo-deep: #7d94a7;
  --arcilla: #dc9581;
  --salvia: #8caea6;
  --ocre: #dcbd5b;

  /* De noche los rellenos ya son claros, así que sirven como texto. */
  --azulejo-texto: #98abbb;   /* 5.97:1 sobre el fondo */
  --arcilla-texto: #dc9581;   /* 4.55:1 sobre panel */
  --salvia-texto: #8caea6;    /* 4.58:1 sobre panel */
  --ocre-texto: #dcbd5b;      /* 6.03:1 sobre panel */

  /* Sobre un azulejo claro, la tinta. Blanco encima daría 1.7:1 — es el
   * bug que ya se colo una vez en el panel de admin. */
  --sobre-azulejo: #1a2e35;   /* 5.97:1 */
  --sobre-arcilla: #1a2e35;   /* 5.83:1 — blanco aqui daria 2.43:1 */
}

/* ==================================================================
 * PAGINAS SIN SELECTOR DE TEMA
 * ==================================================================
 * El kiosk y el panel fijan `data-theme` siempre, asi que esto no les
 * afecta. Es para las paginas que se abren desde un email —el magic link y
 * la invitacion—, que no tienen boton de tema ni sesion donde guardarlo:
 * ahi se respeta lo que prefiera el sistema, de modo que abrir la
 * invitacion de noche en el movil salga en oscuro.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #1a2e35;
    --bg-panel: #2c3f45;
    --bg-card: #2c3f45;
    --ink: #f1ede6;
    --ink-soft: #a2acaf;
    --line: rgba(241, 237, 230, 0.14);
    --line-input: rgba(241, 237, 230, 0.22);
    --azulejo: #98abbb;
    --azulejo-deep: #7d94a7;
    --arcilla: #dc9581;
    --salvia: #8caea6;
    --ocre: #dcbd5b;
    --azulejo-texto: #98abbb;
    --arcilla-texto: #dc9581;
    --salvia-texto: #8caea6;
    --ocre-texto: #dcbd5b;
    --sobre-azulejo: #1a2e35;
    --sobre-arcilla: #1a2e35;
  }
}

/* ==================================================================
 * LUZ AMBIENTE
 * ==================================================================
 * Mismos valores que el `hero-luz` de la landing, para que la app y la web
 * se sientan el mismo producto. Los tres degradados se mezclan con los
 * colores de la paleta, así que cambian solos con el tema.
 */
.ambiente {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 18% 22%,
      color-mix(in oklab, var(--azulejo) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 30%,
      color-mix(in oklab, var(--arcilla) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 40% at 55% 88%,
      color-mix(in oklab, var(--ocre) 10%, transparent), transparent 70%);
  animation: respirar 16s ease-in-out infinite;
  transition: background 1s ease;
}

@keyframes respirar {
  0%, 100% { opacity: 0.45; transform: scale(1) translateY(0); }
  50%      { opacity: 0.7;  transform: scale(1.04) translateY(-1%); }
}

/* Sin esto, cualquier regla con `display` gana al [hidden] del navegador y
 * el elemento sigue viéndose. Pasó con el panel de acceso, que es flex. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ambiente { animation: none; }
}

/* ====================================================================
 * CONTRASTES COMPROBADOS (WCAG 2.1 AA: 4.5 texto normal, 3.0 interfaz)
 * ====================================================================
 * DÍA
 *   ink sobre bg .................... 13.56:1
 *   ink sobre panel ................. 13.00:1
 *   ink-soft sobre bg ................ 4.74:1
 *   ink-soft sobre panel ............. 4.55:1
 *   sobre-azulejo sobre azulejo ..... 10.02:1
 *   azulejo-texto sobre bg ........... 9.62:1
 *   arcilla-texto sobre panel ........ 5.47:1
 *   salvia-texto sobre panel ......... 5.72:1
 *   ocre-texto sobre panel ........... 4.53:1
 *   blanco sobre arcilla ............. 4.16:1  (avatar, umbral 3.0)
 *   blanco sobre salvia .............. 6.21:1  (avatar)
 *   tinta sobre ocre ................. 6.72:1  (avatar; blanco daría 2.10)
 *   sobre-arcilla sobre arcilla-texto  5.94:1  (badge del buzón)
 *
 * NOCHE
 *   ink sobre bg .................... 12.11:1
 *   ink sobre panel .................. 9.45:1
 *   ink-soft sobre bg ................ 6.09:1
 *   ink-soft sobre panel ............. 4.76:1
 *   sobre-azulejo sobre azulejo ...... 5.97:1
 *   azulejo-texto sobre bg ........... 5.97:1
 *   arcilla-texto sobre panel ........ 4.55:1
 *   salvia-texto sobre panel ......... 4.58:1
 *   ocre-texto sobre panel ........... 6.03:1
 *   tinta sobre cada relleno ......... 5.5:1 a 7.7:1  (avatares)
 *   sobre-arcilla sobre arcilla-texto  5.83:1  (badge del buzón)
 * ==================================================================== */