/* packages/ui — Sistema de diseño SmartLandscape (J65).
 *
 * Fuente ÚNICA de verdad visual: el sitio (hydro-land.cl) y la plataforma
 * (/app/) consumen estas variables. Antes vivían dos marcas distintas —el
 * sitio oscuro con acentos cian/lima y la app clara institucional—; esto las
 * unifica sin perder la identidad ya verificada por el candado de CI
 * (--sl-forest #1A3C2E, --sl-surface blanco, fondo claro).
 *
 * Criterios:
 *  - Contraste AA verificado para todo par texto/fondo que se usa de verdad
 *    (ver la tabla al pie: ningún valor bajo 4.5:1 para texto normal).
 *  - El color NUNCA es el único portador de significado: los estados llevan
 *    además texto o icono (regla de accesibilidad de la casa).
 *  - Una escala tipográfica y una de espaciado; nada de tamaños sueltos.
 */
:root {
  /* ---- Marca ---------------------------------------------------------- */
  --sl-forest: #1A3C2E;        /* verde profundo: identidad, encabezados */
  --sl-forest-900: #10251C;    /* fondos invertidos (hero, footer) */
  --sl-forest-700: #24523E;
  --sl-grav: #2D7A4F;          /* verde de acción: botones primarios */
  --sl-grav-700: #236340;      /* hover/activo */
  --sl-agua: #0E6B75;          /* acento de datos hídricos (teal) */
  --sl-agua-100: #E3F1F2;
  --sl-lime: #A6D45B;          /* solo decorativo/gráficos, nunca texto */

  /* ---- Superficies y texto -------------------------------------------- */
  --sl-bg: #F5F8F6;
  --sl-surface: #FFFFFF;
  --sl-surface-2: #F0F4F1;     /* filas alternas, chips, fondos suaves */
  --sl-dark: #1F2A24;
  --sl-text: #1F2A24;
  --sl-text-muted: #55655C;    /* AA sobre blanco y sobre --sl-bg */
  --sl-border: #DFE6E2;
  --sl-border-fuerte: #C3CFC8;

  /* ---- Estados --------------------------------------------------------- */
  --sl-danger: #A83232;
  --sl-danger-bg: #FBEDED;
  --sl-warn: #7A5A12;          /* ámbar oscuro: legible como texto */
  --sl-warn-bg: #FBF3DE;
  --sl-ok: #1E6B41;
  --sl-ok-bg: #E7F2EB;

  /* ---- Tipografía ------------------------------------------------------ */
  /* "Inter Variable" va PRIMERO a proposito: es el nombre de familia que
     declara @fontsource-variable/inter, la copia auto-hospedada que usa la
     plataforma (y la unica que existe cuando la PWA de terreno abre sin red).
     Pidiendo solo "Inter" el navegador no encontraba ninguna familia con ese
     nombre y caia a system-ui en silencio: la fuente viajaba en el bundle sin
     usarse nunca — hallazgo de la verificacion EN VIVO del 17-08-2026, J66.
     El sitio publico no define "Inter Variable" y cae a "Inter" del CDN, asi
     que una sola linea sirve a las dos superficies. */
  --sl-font: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --sl-t-xs: 0.6875rem;   /* 11px */
  --sl-t-sm: 0.8125rem;   /* 13px */
  --sl-t-md: 0.9375rem;   /* 15px */
  --sl-t-lg: 1.125rem;
  --sl-t-xl: 1.5rem;
  --sl-t-2xl: 2rem;
  --sl-t-3xl: 2.75rem;
  --sl-leading: 1.55;

  /* ---- Espaciado, radios, elevación, movimiento ------------------------ */
  --sl-s1: 0.25rem; --sl-s2: 0.5rem; --sl-s3: 0.75rem;
  --sl-s4: 1rem;    --sl-s6: 1.5rem; --sl-s8: 2rem; --sl-s12: 3rem;
  --sl-r-sm: 4px; --sl-r: 8px; --sl-r-lg: 14px; --sl-r-full: 999px;
  --sl-sombra-1: 0 1px 2px rgba(16, 37, 28, .06), 0 1px 3px rgba(16, 37, 28, .05);
  --sl-sombra-2: 0 4px 12px rgba(16, 37, 28, .08), 0 2px 4px rgba(16, 37, 28, .05);
  --sl-sombra-3: 0 12px 32px rgba(16, 37, 28, .12);
  --sl-anillo: 0 0 0 3px rgba(45, 122, 79, .35);   /* foco visible */
  --sl-transicion: 140ms cubic-bezier(.2, .8, .3, 1);

  /* Barra superior de la app (J76): con variables propias porque su fondo no
     es una superficie comun — en claro es la marca, en oscuro es panel. */
  --sl-barra-bg: #1A3C2E;
  --sl-barra-texto: #FFFFFF;
  --sl-barra-activo-bg: #FFFFFF;
  --sl-barra-activo-texto: #1A3C2E;
}

/* Quien pide menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  :root { --sl-transicion: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Foco visible SIEMPRE y del mismo color en todo el producto: navegar con
   teclado no puede ser una experiencia de segunda. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sl-grav);
  outline-offset: 2px;
  border-radius: var(--sl-r-sm);
}

/* ---------------------------------------------------------------------------
 * Contrastes verificados (WCAG 2.1, relación mínima 4.5:1 para texto normal,
 * 3:1 para texto grande y para bordes/estados no textuales):
 *
 *   texto        #1F2A24 sobre #FFFFFF ......... 14.84:1  AAA
 *   texto        #1F2A24 sobre #F5F8F6 ......... 13.88:1  AAA
 *   muted        #55655C sobre #FFFFFF ..........  6.17:1  AA
 *   muted        #55655C sobre #F5F8F6 ..........  5.77:1  AA
 *   muted        #55655C sobre #F0F4F1 ..........  5.56:1  AA
 *   forest       #1A3C2E sobre #FFFFFF ......... 12.14:1  AAA
 *   grav         #2D7A4F sobre #FFFFFF ..........  5.24:1  AA
 *   blanco       #FFFFFF sobre #2D7A4F ..........  5.24:1  AA (boton primario)
 *   blanco       #FFFFFF sobre #1A3C2E ......... 12.14:1  AAA (encabezado)
 *   blanco       #FFFFFF sobre #10251C ......... 16.11:1  AAA (hero/footer)
 *   agua         #0E6B75 sobre #FFFFFF ..........  6.22:1  AA
 *   danger       #A83232 sobre #FFFFFF ..........  6.63:1  AA
 *   warn         #7A5A12 sobre #FBF3DE ..........  5.75:1  AA
 *   ok           #1E6B41 sobre #E7F2EB ..........  5.66:1  AA
 *   lima         #A6D45B sobre #10251C ..........  9.35:1  AAA (grafico/acento)
 *
 * (Calculados con la fórmula de luminancia relativa de WCAG; ver
 *  docs/MARCA_Y_SISTEMA_VISUAL.md para el método y el script.)
 * ------------------------------------------------------------------------ */

/* ===========================================================================
 * TEMA OSCURO DE TRABAJO — alineado con el sitio Gravitacional: negro verde,
 * lima para jerarquía, turquesa para agua y superficies con profundidad. No es
 * negro puro ni usa tarjetas blancas dentro del área de trabajo.
 *
 * COMO FUNCIONA: [data-tema="oscuro"] REDEFINE las mismas variables que todo
 * el producto ya consume, así que los componentes no se tocan — se re-tiñen.
 * Un documento (Decision Brief, memoria, todo lo imprimible) se envuelve en
 * .sl-papel y recupera la superficie clara: un informe firmable no se lee en
 * negro, y la regla de artefactos con fondo blanco se respeta donde importa.
 *
 * La paleta mantiene texto normal por encima de AA; el lima y el turquesa se
 * usan sobre fondos verdes oscuros y nunca como texto sobre blanco.
 * ======================================================================== */
[data-tema="oscuro"] {
  /* Superficies y texto */
  --sl-bg: #041008;
  --sl-surface: #07170d;
  --sl-surface-2: #0d2114;
  --sl-text: #f4f7f2;
  --sl-text-muted: #a7b9ab;
  --sl-border: rgba(121, 242, 77, 0.16);
  --sl-border-fuerte: rgba(121, 242, 77, 0.34);

  /* Identidad del sitio: lima para títulos, verde profundo para acciones que
     llevan texto blanco y turquesa exclusivamente para el dato hídrico. */
  --sl-forest: #9af76b;
  --sl-forest-900: #041008;
  --sl-forest-700: #183d22;
  --sl-grav: #1f733e;
  --sl-grav-700: #175a31;
  --sl-agua: #45dbc5;
  --sl-agua-100: rgba(69, 219, 197, 0.12);
  --sl-lime: #79f24d;

  /* Estados, re-medidos para fondo oscuro */
  --sl-danger: #ff9c98;
  --sl-danger-bg: rgba(255, 156, 152, 0.12);
  --sl-warn: #f5d276;
  --sl-warn-bg: rgba(245, 210, 118, 0.10);
  --sl-ok: #9af76b;
  --sl-ok-bg: rgba(154, 247, 107, 0.10);

  /* Halo con presupuesto: solo foco y elemento activo (regla de J65 §2). */
  --sl-barra-bg: #061109;
  --sl-barra-texto: #f4f7f2;
  --sl-barra-activo-bg: #79f24d;
  --sl-barra-activo-texto: #041008;

  --sl-anillo: 0 0 0 3px rgba(69, 219, 197, 0.38);
  --sl-sombra-1: 0 1px 2px rgba(0, 8, 2, .55), 0 1px 3px rgba(0, 8, 2, .4);
  --sl-sombra-2: 0 4px 14px rgba(0, 8, 2, .58), 0 2px 4px rgba(0, 8, 2, .44);
  --sl-sombra-3: 0 14px 36px rgba(0, 8, 2, .7);
}
[data-tema="oscuro"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--sl-grav);
}

/* El documento dentro del tema oscuro: papel claro, tokens claros. Aplica el
   MISMO juego de variables del tema claro a su subárbol, así el Brief y toda
   pieza imprimible se ven igual dentro y fuera del tema oscuro. */
[data-tema="oscuro"] .sl-papel {
  --sl-bg: #F5F8F6;
  --sl-surface: #FFFFFF;
  --sl-surface-2: #F0F4F1;
  --sl-text: #1F2A24;
  --sl-text-muted: #55655C;
  --sl-border: #DFE6E2;
  --sl-border-fuerte: #C3CFC8;
  --sl-forest: #1A3C2E;
  --sl-forest-900: #10251C;
  --sl-forest-700: #24523E;
  --sl-grav: #2D7A4F;
  --sl-grav-700: #236340;
  --sl-agua: #0E6B75;
  --sl-agua-100: #E3F1F2;
  --sl-lime: #A6D45B;
  --sl-danger: #A83232;
  --sl-danger-bg: #FBEDED;
  --sl-warn: #7A5A12;
  --sl-warn-bg: #FBF3DE;
  --sl-ok: #1E6B41;
  --sl-ok-bg: #E7F2EB;
  background: var(--sl-surface);
  color: var(--sl-text);
  border-radius: var(--sl-r-lg);
}