/*
 * LoraHub — tokens de diseño.
 * Fuente: DESIGN.md (carácter del producto, anti-patrones) + los tres
 * skills de diseño instalados (apple-design: tracking/leading, reduced
 * motion; emil-design-eng: easing/duración; design-taste-frontend: un solo
 * acento, contraste WCAG — su parte de landing pages/hero/marquee no aplica
 * a este panel, es explícitamente fuera de su alcance declarado).
 *
 * Referencia mental: terminal financiera / panel de control industrial,
 * NO una app de consumo. Color = semántica de estado, nunca decoración.
 */

:root {
  color-scheme: light;

  /* Neutros */
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-sunken: #eef0f3;
  --color-border: #dde1e6;
  --color-border-strong: #c3c9d1;
  --color-text: #1a1d21;
  --color-text-muted: #5b6470;
  --color-text-faint: #8b939e;

  /* Acento de marca — único, uso interactivo primario */
  --color-accent: #1d5fd6;
  --color-accent-hover: #1650b8;
  --color-accent-contrast: #ffffff;

  /* Estados operativos — los ÚNICOS colores saturados permitidos (DESIGN.md §3) */
  --color-normal: var(--color-text-muted);
  --color-warning: #a15c00;
  --color-warning-bg: #fdf3e0;
  --color-alarm: #b3261e;
  --color-alarm-bg: #fbe9e7;
  --color-offline: #5b6470;
  --color-offline-bg: #eceef1;

  /* Tipografía — máx. 3 tamaños por pantalla, jerarquía por peso */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  --text-sm: 0.8125rem;   /* 13px — tablas, metadatos */
  --text-base: 0.9375rem; /* 15px — cuerpo, formularios */
  --text-lg: 1.25rem;     /* 20px — título de pantalla */

  /* Espaciado — deliberadamente no uniforme */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radios — escala única, ≤6px en componentes de datos (DESIGN.md §2) */
  --radius-sm: 4px;
  --radius-md: 6px;

  /* Movimiento — solo funcional, nunca decorativo (DESIGN.md §2/§3) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-press: 140ms;
  --duration-ui: 180ms;

  /* Densidad de tabla — objetivo ~40 filas sin scroll en 1080p */
  --row-height: 34px;

  --shadow-1: 0 1px 2px rgba(20, 24, 30, 0.06);
  --shadow-2: 0 4px 16px rgba(20, 24, 30, 0.12);
}

/* Modo oscuro diseñado, no invertido (DESIGN.md §3): gris muy oscuro, no
   negro puro; alarm/warning recalibrados para no deslumbrar. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #15181c;
    --color-surface: #1b1f24;
    --color-surface-sunken: #12151a;
    --color-border: #2b3036;
    --color-border-strong: #3a4048;
    --color-text: #e6e9ec;
    --color-text-muted: #a3abb5;
    --color-text-faint: #6b7480;

    --color-accent: #5b8dee;
    --color-accent-hover: #7ba3f2;
    --color-accent-contrast: #0b1220;

    --color-warning: #e0a338;
    --color-warning-bg: #2c2410;
    --color-alarm: #e0564c;
    --color-alarm-bg: #2c1512;
    --color-offline: #7c8591;
    --color-offline-bg: #21252b;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #15181c;
  --color-surface: #1b1f24;
  --color-surface-sunken: #12151a;
  --color-border: #2b3036;
  --color-border-strong: #3a4048;
  --color-text: #e6e9ec;
  --color-text-muted: #a3abb5;
  --color-text-faint: #6b7480;
  --color-accent: #5b8dee;
  --color-accent-hover: #7ba3f2;
  --color-accent-contrast: #0b1220;
  --color-warning: #e0a338;
  --color-warning-bg: #2c2410;
  --color-alarm: #e0564c;
  --color-alarm-bg: #2c1512;
  --color-offline: #7c8591;
  --color-offline-bg: #21252b;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
}