/**
 * Tema «Plano técnico».
 *
 * Solo define variables: azul tinta con retícula, trazos claros como en un
 * plano y un acento naranja señal. Para crear otro estilo, copia este archivo,
 * cambia el selector a [data-theme="<id>"] y registra el tema en src/themes.py.
 */

:root[data-theme="plano"] {
  color-scheme: dark;

  /* Tipografía */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Cascadia Code', ui-monospace, monospace;

  /* Superficies */
  --bg: #0b2545;
  --bg-panel: #0a2341;
  --bg-rail: #081d38;
  --bg-input: #081d38;
  --radius: 0px;
  --shadow-popover: -24px 24px 48px rgba(3, 12, 26, 0.6);

  /* Trazos */
  --line: rgba(224, 242, 255, 0.2);
  --line-medium: rgba(224, 242, 255, 0.35);
  --line-strong: rgba(224, 242, 255, 0.6);

  /* Texto */
  --text: #e0f2ff;
  --text-soft: #cfe3f7;
  --text-body: #b9d4ef;
  --text-muted: #8fb3d9;
  --text-faint: #5d82ad;

  /* Acento: lo que está activo ahora (comparaciones, foco, reproducir) */
  --accent: #ff8c42;
  --accent-hover: #ffa266;
  --accent-text: #ffb27f;
  --accent-soft: rgba(255, 140, 66, 0.14);
  --on-accent: #0b2545;
  --focus: #ff8c42;

  /* Hecho: lo que ya está en su sitio definitivo */
  --done: #5fd4ff;
  --done-text: #9fe5ff;
  --done-soft: rgba(95, 212, 255, 0.08);

  /* Escenario: fondo de retícula de plano */
  --stage-bg: #0b2545;
  --stage-pattern:
    linear-gradient(rgba(224, 242, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 242, 255, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(224, 242, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 242, 255, 0.045) 1px, transparent 1px);
  --stage-pattern-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;

  /* Barras */
  --bar-radius: 0px;
  --bar-idle-bg: repeating-linear-gradient(135deg, rgba(224, 242, 255, 0.22) 0 2px, transparent 2px 8px);
  --bar-idle-border: #e0f2ff;
  --bar-active-bg: repeating-linear-gradient(135deg, rgba(255, 140, 66, 0.55) 0 2px, rgba(255, 140, 66, 0.12) 2px 6px);
  --bar-active-border: #ff8c42;
  --bar-done-bg: #5fd4ff;
  --bar-done-border: #5fd4ff;
  --thumb-idle: rgba(224, 242, 255, 0.55);

  /* Ordenado entre sí pero no definitivo (la mano de Insertion Sort) */
  --bar-ordered-bg: rgba(224, 242, 255, 0.16);
  --bar-ordered-border: #e0f2ff;
  --zone-ordered-bg: rgba(224, 242, 255, 0.035);
  --zone-ordered-border: rgba(224, 242, 255, 0.5);
  --band-less-bg: rgba(95, 212, 255, 0.08);
  --band-less-border: rgba(95, 212, 255, 0.75);
  --band-greater-bg: rgba(255, 140, 66, 0.07);
  --band-greater-border: rgba(255, 140, 66, 0.7);
  --thumb-ordered: #e0f2ff;

  /* Elemento sacado de la fila (la clave de Insertion Sort) y el hueco que deja */
  --bar-held-bg: #ff8c42;
  --bar-held-border: #ffb27f;
  --hole-border: #ffb27f;

  /* Haz que recorre los elementos al examinarlos (Selection Sort) */
  --beam-bg: linear-gradient(180deg, rgba(224, 242, 255, 0) 0%, rgba(224, 242, 255, 0.13) 100%);
  --beam-edge: rgba(224, 242, 255, 0.45);

  /* Escenas 3D (Three.js lee estos valores: usa colores opacos, en hex) */
  --scene-node: #1f4f87;
  --scene-bar: #2c5c94;
  --scene-ordered: #bcd3ea;
  --scene-line: #8fb3d9;
  --scene-grid: #1d3f66;
  --scene-wall: #06182d;
  --scene-light-sky: #cfe3f7;
  --scene-light-ground: #0b2545;
}