/* Tokens del sistema visual: "Corporativo claro" con su variante oscura.
   Cada color usa light-dark(claro, oscuro). El esquema lo fija color-scheme
   (por defecto sigue al sistema) y el atributo data-theme de <html>
   (lo pone js/nucleo.js: "claro" | "oscuro"; sin atributo = automático).
   Paleta (hex):
     Marca (acento)  claro #1D5BC4  · oscuro #7AAEFF
     Fondo           claro #F3F5F8  · oscuro #0C1118
     Superficie      claro #FFFFFF  · oscuro #141B25
     Texto           claro #1C2633  · oscuro #DCE3EC
     Atenuado        claro #566376  · oscuro #9AA7B8
     Ok / Aviso / Error: ver bloque "Estados" (texto, relleno, fondo suave). */

@layer reset, base, components, utilities, views;

:root {
  color-scheme: light dark;

  /* Superficies */
  --bg: light-dark(#F3F5F8, #0C1118);
  --surface: light-dark(#FFFFFF, #141B25);
  --surface-2: light-dark(#EEF2F6, #1A2330);
  --surface-3: light-dark(#E4EAF1, #222C3C);
  --bar-bg: var(--surface-3);
  --line: light-dark(#D5DCE5, #2A3546);
  --control: light-dark(#748194, #6F7D90);
  --shadow-1: light-dark(0 1px 2px rgb(16 24 40 / 0.06), 0 1px 2px rgb(0 0 0 / 0.5));
  --shadow-2: light-dark(0 6px 16px -4px rgb(16 24 40 / 0.14), 0 8px 20px -6px rgb(0 0 0 / 0.7));

  /* Texto */
  --ink: light-dark(#1C2633, #DCE3EC);
  --ink-strong: light-dark(#0B1320, #F5F8FB);
  --muted: light-dark(#566376, #9AA7B8);

  /* Marca */
  --brand: light-dark(#1D5BC4, #7AAEFF);
  --accent: var(--brand);
  --on-brand: light-dark(#FFFFFF, #0A1A33);
  --brand-soft: light-dark(#E6EEFB, #17294A);
  --brand-ink: light-dark(#1A4FAE, #A9C9FF);
  --focus: light-dark(#1D5BC4, #9CC2FF);

  /* Estados: ok / warn / bad. -fill = marcas y gráficos; -soft = fondo de badge; -ink = texto sobre -soft */
  --ok: light-dark(#13703A, #5FD38F);
  --ok-fill: light-dark(#1F8A4A, #3DBE78);
  --ok-soft: light-dark(#E2F3E8, #12301F);
  --ok-ink: light-dark(#0E5A2E, #8BE3B0);
  --warn: light-dark(#8C5200, #F6C04E);
  --warn-fill: light-dark(#B86E00, #E9A629);
  --warn-soft: light-dark(#FCEFD6, #352809);
  --warn-ink: light-dark(#7A4700, #FFD77A);
  --bad: light-dark(#B42318, #FF8A80);
  --bad-fill: light-dark(#C8372C, #F0675C);
  --bad-soft: light-dark(#FBE7E4, #3D1A1C);
  --bad-ink: light-dark(#8F1D15, #FFB3AB);
  --neutral-soft: light-dark(#E5EAF1, #243041);
  --neutral-ink: light-dark(#3A4658, #C9D2DD);

  /* Tipografía: pila del sistema, sin fuentes externas */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-2xs: 0.75rem;   /* 12 */
  --fs-xs: 0.8125rem;  /* 13 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-md: 0.9375rem;  /* 15: cuerpo */
  --fs-base: 1rem;     /* 16: campos (evita zoom en iOS) */
  --fs-lg: 1.125rem;   /* 18: h2 */
  --fs-xl: 1.25rem;    /* 20 */
  --fs-2xl: 1.5rem;    /* 24: h1 móvil */
  --fs-3xl: 1.875rem;  /* 30: h1 escritorio */
  --lh-tight: 1.2;
  --lh-body: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Espaciado en rejilla de 4px */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Radios, alturas y ancho */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --hit: 44px;
  --content: 1120px;
  --rail: 232px;

  /* Movimiento */
  --dur: 150ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Mapa: filtro de las teselas OSM. light-dark() solo admite colores, así que el filtro se define por tema.
     Solo el tema oscuro atenúa las teselas; la atribución no pasa por aquí. */
  --map-tile-filter: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) { --map-tile-filter: invert(0.88) hue-rotate(180deg) saturate(0.55) brightness(0.9); }
}
:root[data-theme="oscuro"] { --map-tile-filter: invert(0.88) hue-rotate(180deg) saturate(0.55) brightness(0.9); }

html[data-theme="claro"] { color-scheme: light; }
html[data-theme="oscuro"] { color-scheme: dark; }