/* Tokens de diseño de INDEC Engine (un proyecto de Sudlar).
   Fuente de verdad: design.md (bloque YAML). Este archivo los implementa con los mismos nombres:
   colors.<x> -> --color-<x>, rounded.<x> -> --radius-<x>, spacing.<n> -> --space-<n>,
   pignolo.elevation.levelN -> --elevation-N, pignolo.motion.* -> --duration-* / --ease-*.
   La correspondencia está declarada en design.md (pignolo.cssVars) y ui-audit la compara (DRIFT-01).

   Un solo acento de interfaz: el azul austral. La paleta de datos (--series-*, --seq-*, --div-*) y los
   estados (--status-*) son solo para gráficos e indicadores de estado, nunca para la marca.

   Temas: claro por defecto; oscuro por preferencia del sistema o por [data-theme="dark"]; [data-theme="light"]
   fuerza el claro aunque el sistema esté en oscuro. Los bloques se escriben sin :not() a propósito: así el
   auditor lee cada bloque con su tema. Los nombres cortos del final (--bg, --text, --line...) son alias
   para la landing, que todavía los usa; las vistas nuevas usan los nombres largos. */

@font-face { font-family: "Space Grotesk"; font-weight: 300; font-display: swap; src: url("../fonts/space-grotesk-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-display: swap; src: url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 300; font-display: swap; src: url("../fonts/inter-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;

  /* ---- Colores primitivos (design.md: colors) ---- */
  --color-ink: #0E1116;
  --color-austral: #2457F5;
  --color-austral-on-dark: #6E9BFF;
  --color-austral-hover: #1A43C4;
  --color-austral-hover-on-dark: #96B5FF;
  --color-austral-50: #E8EEFE;
  --color-night-austral: #1C2A4A;
  --color-white: #FFFFFF;
  --color-gray-50: #F5F3F0;
  --color-gray-200: #E8E4DF;
  --color-gray-400: #85898F;
  --color-gray-500: #686870;
  --color-gray-600: #5A5A62;
  --color-night-800: #11141A;
  --color-night-700: #181C23;
  --color-night-600: #262A32;
  --color-night-400: #6E7480;
  --color-red-400: #F85C57;

  /* ---- Colores semánticos, tema claro ---- */
  --color-primary: #2457F5;
  --color-on-primary: #FFFFFF;
  --color-primary-hover: #1A43C4;
  --color-action: #0E1116;
  --color-on-action: #FFFFFF;
  --color-action-hover: #2A2E36;
  --color-primary-container: #E8EEFE;
  --color-on-primary-container: #0E1116;
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-container: #F5F3F0;
  --color-on-surface: #0E1116;
  --color-on-surface-variant: #5A5A62;
  --color-on-surface-muted: #686870;
  --color-outline: #85898F;
  --color-outline-variant: #E8E4DF;
  --color-focus-ring: #2457F5;
  --color-error: #AA203C;
  --color-on-error: #FFFFFF;
  /* Extensiones de interfaz (no son roles MD3): aviso metodológico y éxito, siempre con ícono y texto */
  --color-warning: #8A5A00;
  --color-warning-container: #FFF4DB;
  --color-success: #17794A;
  --color-scrim: rgb(14 17 22 / 0.48);
  --color-header: rgb(255 255 255 / 0.94);

  /* ---- Forma (design.md: rounded) ---- */
  --radius-none: 0px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px; /* botones, campos de búsqueda, chips y etiquetas: la forma de control del sistema */

  /* ---- Espaciado (design.md: spacing) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* ---- Elevación (design.md: pignolo.elevation) ---- */
  --elevation-0: none;
  --elevation-1: 0 0 0 1px rgb(14 17 22 / 0.05);
  --elevation-2: 0 0 0 1px rgb(14 17 22 / 0.06), 0 2px 8px rgb(14 17 22 / 0.04);
  --elevation-3: 0 0 0 1px rgb(14 17 22 / 0.06), 0 12px 32px rgb(14 17 22 / 0.10);
  --elevation-4: 0 0 0 1px rgb(14 17 22 / 0.06), 0 32px 80px rgb(14 17 22 / 0.20);

  /* ---- Estados, foco y objetivos (design.md: pignolo.states, focus, targets) ---- */
  --state-hover: 0.08; --state-pressed: 0.12; --state-disabled-content: 0.38;
  --focus-width: 2px; --focus-offset: 2px;
  --target-min: 24px; --target-recommended: 44px;
  --color-container-hover: color-mix(in srgb, var(--color-surface-container) 88%, var(--color-on-surface));  /* hover de tarjetas, chips y botones rellenos */
  --scroll-shadow: color-mix(in srgb, var(--color-on-surface) 28%, transparent);

  /* ---- Movimiento (design.md: pignolo.motion): sobrio, sin rebotes; solo transform y opacity ---- */
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 450ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* ---- Tipografía (design.md: typography): escala modular 1,25 sobre 16 px ---- */
  --font-display: "Space Grotesk", system-ui, "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-0: 1rem; --fs-1: 1.25rem; --fs-2: 1.5625rem; --fs-3: 1.9375rem; --fs-4: 2.4375rem; --fs-5: 3.0625rem; --fs-6: 3.8125rem;
  --fs-sm: .875rem; --fs-xs: .75rem;
  --lh-display: 1.08; --lh-body: 1.55;
  --fw-display: 300; --ls-display: -0.035em; --ls-title: -0.015em;
  --fs-hero: clamp(2.5rem, 7vw, 4.75rem); --fs-display: clamp(2rem, 4.5vw, 3.25rem);
  --section-gap: clamp(64px, 9vw, 96px);

  /* ---- Diagramación ---- */
  --gutter: clamp(20px, 5vw, 48px);
  --maxw: 1200px;
  --measure: 70ch;

  /* ---- Datos: solo para gráficos (paleta validada de Sudlar). Orden fijo, nunca se cicla ---- */
  --series-1: #2457F5; --series-2: #E4681D; --series-3: #009C66; --series-4: #EA9F38;
  --series-5: #CD7BA1; --series-6: #026E0D; --series-7: #352B99; --series-8: #CD0017;
  --seq-1: #8AA8F9; --seq-2: #5F86F7; --seq-3: #2457F5; --seq-4: #1A43C4; --seq-5: #123293; --seq-6: #0B2263;
  --div-neg-1: #C7272C; --div-neg-2: #D45A55; --div-neg-3: #DF837C; --div-neg-4: #E7A7A2; --div-neg-5: #ECCCCA;
  --div-mid: #EFEBE6;
  --div-pos-1: #2457F5; --div-pos-2: #4A7BF8; --div-pos-3: #729BFA; --div-pos-4: #9AB8FA; --div-pos-5: #C3D4F7;
  /* Estados reservados (siempre con ícono y etiqueta, nunca como color de serie) */
  --status-good: #0CA30C; --status-warn: #FAB219; --status-serious: #EC835A; --status-critical: #AA203C;
  --grid: #E8E4DF;
  --bar-muted: #B9BCC6;
  /* Tinta fija para el texto dentro de celdas de color (el gráfico elige la de mayor contraste) */
  --chart-ink-dark: #0E1116;
  --chart-ink-light: #FFFFFF;

  /* ---- Alias heredados (landing) ---- */
  --ink: var(--color-ink);
  --austral: var(--color-austral);
  --austral-on-dark: var(--color-austral-on-dark);
  --bg: var(--color-background);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-container);
  --line: var(--color-outline-variant);
  --text: var(--color-on-surface);
  --text-2: var(--color-on-surface-variant);
  --text-3: var(--color-on-surface-muted);
  --accent: var(--color-primary);
  --accent-ink: var(--color-on-primary);
  --focus: var(--color-focus-ring);
  --r-1: var(--radius-sm);
  --r-2: var(--radius-md);
  --ease: var(--ease-standard);
  --dur: var(--duration-base);
}

/* Oscuro por preferencia del sistema */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #6E9BFF;
    --color-on-primary: #0E1116;
    --color-primary-hover: #96B5FF;
    --color-action: #FFFFFF;
    --color-on-action: #0E1116;
    --color-action-hover: #E4E4E8;
    --color-primary-container: #1C2A4A;
    --color-on-primary-container: #FFFFFF;
    --color-background: #0B0D11;
    --color-surface: #11141A;
    --color-surface-container: #181C23;
    --color-on-surface: #FFFFFF;
    --color-on-surface-variant: #C3C6CE;
    --color-on-surface-muted: #8F939C;
    --color-outline: #6E7480;
    --color-outline-variant: #262A32;
    --color-focus-ring: #6E9BFF;
    --color-error: #F85C57;
    --color-on-error: #0E1116;
    --color-warning: #F0B84A;
    --color-warning-container: #33290F;
    --color-success: #4FC88A;
    --color-scrim: rgb(0 0 0 / 0.6);
    --color-header: rgb(17 20 26 / 0.94);
    --elevation-1: 0 0 0 1px rgb(255 255 255 / 0.06);
    --elevation-2: 0 0 0 1px rgb(255 255 255 / 0.08), 0 2px 8px rgb(0 0 0 / 0.4);
    --elevation-3: 0 0 0 1px rgb(255 255 255 / 0.08), 0 12px 32px rgb(0 0 0 / 0.55);
    --elevation-4: 0 0 0 1px rgb(255 255 255 / 0.08), 0 32px 80px rgb(0 0 0 / 0.7);
    --series-1: #5977E9; --series-2: #EA7657; --series-3: #55B192; --series-4: #E5A301;
    --series-5: #AC3F71; --series-6: #2C7D00; --series-7: #B2A2F9; --series-8: #D24D57;
    --seq-1: #0A2CD6; --seq-2: #295AE9; --seq-3: #517FED; --seq-4: #7A9FF1; --seq-5: #A6BFF6; --seq-6: #D1DEFA;
    --div-neg-1: #F85C57; --div-neg-2: #CC5652; --div-neg-3: #A24E4C; --div-neg-4: #794546; --div-neg-5: #513A3E;
    --div-mid: #262A32;
    --div-pos-1: #6994F7; --div-pos-2: #5C7FCD; --div-pos-3: #4F6AA5; --div-pos-4: #42557E; --div-pos-5: #364159;
    --status-critical: #B42A43;
    --grid: #262A32;
    --bar-muted: #4A4F5A;
  }
}

/* Oscuro elegido por el usuario */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #6E9BFF;
  --color-on-primary: #0E1116;
  --color-primary-hover: #96B5FF;
  --color-action: #FFFFFF;
  --color-on-action: #0E1116;
  --color-action-hover: #E4E4E8;
  --color-primary-container: #1C2A4A;
  --color-on-primary-container: #FFFFFF;
  --color-background: #0B0D11;
  --color-surface: #11141A;
  --color-surface-container: #181C23;
  --color-on-surface: #FFFFFF;
  --color-on-surface-variant: #C3C6CE;
  --color-on-surface-muted: #8F939C;
  --color-outline: #6E7480;
  --color-outline-variant: #262A32;
  --color-focus-ring: #6E9BFF;
  --color-error: #F85C57;
  --color-on-error: #0E1116;
  --color-warning: #F0B84A;
  --color-warning-container: #33290F;
  --color-success: #4FC88A;
  --color-scrim: rgb(0 0 0 / 0.6);
  --color-header: rgb(17 20 26 / 0.94);
  --elevation-1: 0 0 0 1px rgb(255 255 255 / 0.06);
  --elevation-2: 0 0 0 1px rgb(255 255 255 / 0.08), 0 2px 8px rgb(0 0 0 / 0.4);
  --elevation-3: 0 0 0 1px rgb(255 255 255 / 0.08), 0 12px 32px rgb(0 0 0 / 0.55);
  --elevation-4: 0 0 0 1px rgb(255 255 255 / 0.08), 0 32px 80px rgb(0 0 0 / 0.7);
  --series-1: #5977E9; --series-2: #EA7657; --series-3: #55B192; --series-4: #E5A301;
  --series-5: #AC3F71; --series-6: #2C7D00; --series-7: #B2A2F9; --series-8: #D24D57;
  --seq-1: #0A2CD6; --seq-2: #295AE9; --seq-3: #517FED; --seq-4: #7A9FF1; --seq-5: #A6BFF6; --seq-6: #D1DEFA;
  --div-neg-1: #F85C57; --div-neg-2: #CC5652; --div-neg-3: #A24E4C; --div-neg-4: #794546; --div-neg-5: #513A3E;
  --div-mid: #262A32;
  --div-pos-1: #6994F7; --div-pos-2: #5C7FCD; --div-pos-3: #4F6AA5; --div-pos-4: #42557E; --div-pos-5: #364159;
  --status-critical: #B42A43;
  --grid: #262A32;
  --bar-muted: #4A4F5A;
}

/* Claro elegido por el usuario (gana sobre la preferencia oscura del sistema) */
:root[data-theme="light"] {
  color-scheme: light;
  --color-primary: #2457F5;
  --color-on-primary: #FFFFFF;
  --color-primary-hover: #1A43C4;
  --color-action: #0E1116;
  --color-on-action: #FFFFFF;
  --color-action-hover: #2A2E36;
  --color-primary-container: #E8EEFE;
  --color-on-primary-container: #0E1116;
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-container: #F5F3F0;
  --color-on-surface: #0E1116;
  --color-on-surface-variant: #5A5A62;
  --color-on-surface-muted: #686870;
  --color-outline: #85898F;
  --color-outline-variant: #E8E4DF;
  --color-focus-ring: #2457F5;
  --color-error: #AA203C;
  --color-on-error: #FFFFFF;
  --color-warning: #8A5A00;
  --color-warning-container: #FFF4DB;
  --color-success: #17794A;
  --color-scrim: rgb(14 17 22 / 0.48);
  --color-header: rgb(255 255 255 / 0.94);
  --elevation-1: 0 0 0 1px rgb(14 17 22 / 0.05);
  --elevation-2: 0 0 0 1px rgb(14 17 22 / 0.06), 0 2px 8px rgb(14 17 22 / 0.04);
  --elevation-3: 0 0 0 1px rgb(14 17 22 / 0.06), 0 12px 32px rgb(14 17 22 / 0.10);
  --elevation-4: 0 0 0 1px rgb(14 17 22 / 0.06), 0 32px 80px rgb(14 17 22 / 0.20);
  --series-1: #2457F5; --series-2: #E4681D; --series-3: #009C66; --series-4: #EA9F38;
  --series-5: #CD7BA1; --series-6: #026E0D; --series-7: #352B99; --series-8: #CD0017;
  --seq-1: #8AA8F9; --seq-2: #5F86F7; --seq-3: #2457F5; --seq-4: #1A43C4; --seq-5: #123293; --seq-6: #0B2263;
  --div-neg-1: #C7272C; --div-neg-2: #D45A55; --div-neg-3: #DF837C; --div-neg-4: #E7A7A2; --div-neg-5: #ECCCCA;
  --div-mid: #EFEBE6;
  --div-pos-1: #2457F5; --div-pos-2: #4A7BF8; --div-pos-3: #729BFA; --div-pos-4: #9AB8FA; --div-pos-5: #C3D4F7;
  --status-critical: #AA203C;
  --grid: #E8E4DF;
  --bar-muted: #B9BCC6;
}

/* Movimiento reducido: sin desplazamientos; los fundidos quedan casi instantáneos */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}