/* ============================================================
 * JOSBYTE SYSTEM — Tokens de diseño (03_GUIA_DE_DISENO.md §3)
 * Concepto: "Plano técnico / Blueprint de taller"
 * Tinta azul marino, papel técnico claro, acento cian de señal.
 * Incluye modo oscuro opcional ([data-tema="oscuro"] y
 * [data-theme="dark"]) y alias de compatibilidad con hojas
 * heredadas (--jb-*).
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Tinta (marca) ---------- */
  --tinta-950: #081126;   /* fondo héroe, barra lateral */
  --tinta-900: #0d1a3a;   /* títulos principales */
  --tinta-800: #14254f;   /* bloques oscuros */
  --tinta-700: #1e3570;   /* bordes en oscuro */

  /* ---------- Azul de marca ---------- */
  --marca:     #2f4fa7;   /* botones, enlaces activos */
  --marca-600: #3a5cc0;   /* hover */
  --marca-100: #e3e9f8;   /* fondos suaves */
  --marca-50:  #f2f5fc;   /* filas alternas, chips */

  /* ---------- Señal (acento) ---------- */
  --senal:     #14c7b8;   /* cian vivo — estado activo, foco */
  --senal-600: #0fa598;   /* hover sobre cian */
  --senal-bg:  #e2f8f5;   /* fondo de etiqueta activa */

  /* ---------- Superficies (papel) ---------- */
  --papel:        #f6f7f9; /* fondo general de la app */
  --hoja:         #ffffff; /* tarjetas, tablas, documento */
  --linea:        #e2e6ee; /* bordes 1px */
  --linea-fuerte: #cdd4e1; /* divisores y cabeceras de tabla */

  /* ---------- Texto ---------- */
  --texto:   #121a2e;     /* cuerpo principal (contraste AAA) */
  --texto-2: #4a5568;     /* subtítulos, etiquetas */
  --texto-3: #718096;     /* ayuda, metadatos (contraste AA >= 4.5:1) */

  /* ---------- Semánticos ---------- */
  --ok:       #1f9d6b;
  --ok-bg:    #e4f6ee;
  --aviso:    #e8a13a;
  --aviso-bg: #fdf3e3;
  --error:    #e5484d;
  --error-bg: #fdecec;
  --info:     #2f4fa7;
  --info-bg:  #e3e9f8;

  /* ---------- Geometría ---------- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --sombra-1: 0 1px 2px rgba(8, 17, 38, .05);
  --sombra-2: 0 10px 28px rgba(8, 17, 38, .12), 0 2px 6px rgba(8, 17, 38, .05);

  /* ---------- Espaciado (base 4px) ---------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;

  /* ---------- Tipografía ---------- */
  --f-titulo: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
  --f-texto:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:   'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* ---------- Alias del sistema jb- (compatibilidad interna) ---------- */
  --jb-tinta-950: var(--tinta-950);
  --jb-tinta-900: var(--tinta-900);
  --jb-tinta-800: var(--tinta-800);
  --jb-tinta-700: var(--tinta-700);
  --jb-marca:     var(--marca);
  --jb-marca-600: var(--marca-600);
  --jb-marca-100: var(--marca-100);
  --jb-marca-50:  var(--marca-50);
  --jb-papel:        var(--papel);
  --jb-hoja:         var(--hoja);
  --jb-linea:        var(--linea);
  --jb-linea-fuerte: var(--linea-fuerte);
  --jb-texto:   var(--texto);
  --jb-texto-2: var(--texto-2);
  --jb-texto-3: var(--texto-3);
  --jb-senal:    var(--senal);
  --jb-senal-bg: var(--senal-bg);
  --jb-ambar:    var(--aviso);
  --jb-ambar-bg: var(--aviso-bg);
  --jb-ok:       var(--ok);
  --jb-ok-bg:    var(--ok-bg);
  --jb-alerta:    var(--error);
  --jb-alerta-bg: var(--error-bg);
  --jb-r-sm: var(--r-sm);
  --jb-r:    var(--r);
  --jb-r-lg: var(--r-lg);
  --jb-sombra-flotante: var(--sombra-2);
  --jb-fuente-titulo: var(--f-titulo);
  --jb-fuente-texto:  var(--f-texto);
  --jb-fuente-mono:   var(--f-mono);

  /* ---------- Alias heredados de style.css / panel.css ---------- */
  --jb-azul-950: var(--tinta-950);
  --jb-azul-900: var(--tinta-900);
  --jb-azul-800: var(--tinta-800);
  --jb-azul-700: var(--tinta-700);
  --jb-azul-600: var(--marca);
  --jb-azul-500: var(--marca-600);
  --jb-azul-100: var(--marca-100);
  --jb-azul-50:  var(--marca-50);
  --jb-cian:     var(--senal);
  --jb-cian-bg:  var(--senal-bg);
  --jb-amarillo:    var(--aviso);
  --jb-amarillo-bg: var(--aviso-bg);
  --jb-verde:    var(--ok);
  --jb-verde-bg: var(--ok-bg);
  --jb-rojo:     var(--error);
  --jb-rojo-bg:  var(--error-bg);
  --jb-gris:     var(--texto-2);
  --jb-borde:    var(--linea);
  --jb-fondo:    var(--papel);
  --jb-radius-sm: var(--r-sm);
  --jb-radius:    var(--r);
  --jb-radius-lg: var(--r-lg);
  --jb-shadow-sm: var(--sombra-1);
  --jb-shadow-md: var(--sombra-1);
  --jb-shadow-lg: var(--sombra-2);
  --jb-glow:      0 0 0 2px var(--senal-bg);
}

/* ---------- Modo oscuro opcional (panel y web pública) ---------- */
[data-tema="oscuro"],
html[data-theme="dark"] {
  --papel:        #0b1426;
  --hoja:         #111e38;
  --linea:        #1f3158;
  --linea-fuerte: #2b4274;
  --texto:        #edf2fb;
  --texto-2:      #a8b5cf;
  --texto-3:      #7e8fad;
  --marca:        #5b7fff;
  --marca-600:    #7594ff;
  --marca-100:    #192a4f;
  --marca-50:     #142240;
  --senal-bg:     #0f2e35;
  --ok-bg:        #0f2d26;
  --aviso-bg:     #332611;
  --error-bg:     #35161d;
  --info-bg:      #192a4f;
}