/* ==========================================================================
   Design Tokens - SubstationTopologySim
   Paleta Prince Blueblood adaptada para Electricidad Aplicada.
   Soporte completo y sincronizado de dos temas: Noche (dark) y Día (light).
   ========================================================================== */

:root, html[data-theme="night"] {
  color-scheme: dark;

  /* Superficies y fondos */
  --color-bg-base: #1c1c28;
  --color-bg-surface: #262636;
  --color-bg-surface-elevated: #303030;
  --color-bg-surface-hover: #3a3a48;
  --color-bg-canvas: #161622;
  --color-card-bg: linear-gradient(180deg, rgba(79, 79, 79, 0.94), rgba(72, 81, 153, 0.52));

  /* Líneas divisorias y bordes */
  --color-border-subtle: rgba(195, 206, 222, 0.18);
  --color-border-medium: rgba(195, 206, 222, 0.28);
  --color-border-active: #0ED1FF;

  /* Tipografía y textos */
  --font-family-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-family-mono: "IBM Plex Mono", "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;

  --color-text-primary: #EAEEF4;
  --color-text-secondary: #ADBAD1;
  --color-text-muted: #8391a8;
  --color-text-inverse: #1c1c28;

  /* Estados eléctricos SCADA normalizados */
  --color-state-closed: #ED4329;       /* Rojo: circuito cerrado / energizado / vivo */
  --color-state-open: #92C21D;         /* Verde: circuito abierto / aislado / seguro */
  --color-state-energized: #ED4329;
  --color-state-deenergized: #5A64BF;
  --color-state-grounded: #E3CA75;
  --color-state-maintenance: #f97316;
  --color-state-fault: #ED4329;

  /* Niveles de tensión unifilares típicos */
  --voltage-500kv: #e11d48;
  --voltage-220kv: #0ED1FF;
  --voltage-110kv: #E3CA75;
  --voltage-66kv:  #92C21D;
  --voltage-23kv:  #A5E1FA;
  --voltage-13kv:  #5A64BF;
  --voltage-default: #0ED1FF;

  /* Rejilla y guía CAD */
  --grid-line-major: rgba(195, 206, 222, 0.12);
  --grid-line-minor: rgba(195, 206, 222, 0.05);
  --canvas-selection-box: rgba(14, 209, 255, 0.18);
  --canvas-selection-border: #0ED1FF;

  /* UI Interacciones */
  --color-accent: #0ED1FF;
  --color-accent-hover: #5A64BF;
  --color-accent-focus: rgba(14, 209, 255, 0.35);

  --color-danger: #ED4329;
  --color-warning: #E3CA75;
  --color-success: #92C21D;
  --color-info: #0ED1FF;

  /* Scrollbars / Barras de navegación */
  --scrollbar-track: rgba(22, 22, 34, 0.6);
  --scrollbar-thumb: rgba(173, 186, 209, 0.35);
  --scrollbar-thumb-hover: #0ED1FF;

  /* Sombras y elevaciones */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 14px 30px rgba(0, 0, 0, 0.5);

  /* Espaciado y radios */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Tamaños fijos de paneles */
  --header-height: 52px;
  --top-nav-height: 38px;
  --sidebar-left-width: 260px;
  --sidebar-right-width: 370px;
  --statusbar-height: 32px;
}

html[data-theme="day"] {
  color-scheme: light;

  /* Superficies y fondos */
  --color-bg-base: #EAEEF4;
  --color-bg-surface: #FFFFFF;
  --color-bg-surface-elevated: #F0F4F8;
  --color-bg-surface-hover: #E4ECF5;
  --color-bg-canvas: #F8FAFD;
  --color-card-bg: linear-gradient(180deg, #FFFFFF, #EAEEF4);

  /* Líneas divisorias y bordes */
  --color-border-subtle: rgba(72, 81, 153, 0.18);
  --color-border-medium: rgba(72, 81, 153, 0.28);
  --color-border-active: #485199;

  /* Textos */
  --color-text-primary: #303030;
  --color-text-secondary: #63627C;
  --color-text-muted: #8887A0;
  --color-text-inverse: #FFFFFF;

  /* Estados eléctricos SCADA normalizados */
  --color-state-closed: #DD100F;       /* Rojo: vivo / cerrado */
  --color-state-open: #6A882F;         /* Verde: abierto / seguro */
  --color-state-energized: #DD100F;
  --color-state-deenergized: #8887A0;
  --color-state-grounded: #CEB143;
  --color-state-maintenance: #f97316;
  --color-state-fault: #DD100F;

  /* Niveles de tensión unifilares */
  --voltage-500kv: #c0153a;
  --voltage-220kv: #0284c7;
  --voltage-110kv: #CEB143;
  --voltage-66kv:  #6A882F;
  --voltage-23kv:  #0891b2;
  --voltage-13kv:  #485199;
  --voltage-default: #0284c7;

  /* Rejilla y guía CAD */
  --grid-line-major: rgba(72, 81, 153, 0.18);
  --grid-line-minor: rgba(72, 81, 153, 0.08);
  --canvas-selection-box: rgba(72, 81, 153, 0.15);
  --canvas-selection-border: #485199;

  /* UI Interacciones */
  --color-accent: #485199;
  --color-accent-hover: #3a3a48;
  --color-accent-focus: rgba(72, 81, 153, 0.25);

  --color-danger: #DD100F;
  --color-warning: #CEB143;
  --color-success: #6A882F;
  --color-info: #0284c7;

  /* Scrollbars / Barras de navegación */
  --scrollbar-track: rgba(234, 238, 244, 0.8);
  --scrollbar-thumb: rgba(99, 98, 124, 0.35);
  --scrollbar-thumb-hover: #485199;

  /* Sombras y elevaciones */
  --shadow-sm: 0 1px 3px rgba(72, 81, 153, 0.08);
  --shadow-md: 0 6px 16px rgba(72, 81, 153, 0.12);
  --shadow-lg: 0 14px 30px rgba(72, 81, 153, 0.16);
}