/* Backlight — design tokens standalone. Importable sin build.
   Fuente: guía de marca oficial (borrador C, vizwal studios 2026) + paleta de pantalla derivada.
   Uso: <link rel="stylesheet" href="assets/backlight-tokens.css">
   Regla: usa el token, nunca el hex crudo. */

:root {
  /* ---- Marca (oficiales — no se alteran) ---- */
  --bl-solar:            #F5EB4E;  /* Amarillo Solar · CMYK 06/00/87/00 · RGB 245,235,78 */
  --bl-espresso:         #211915;  /* Espresso Oscuro · CMYK 00/00/00/100 · RGB 33,25,21 */
  --bl-blanco:           #FFFFFF;  /* Blanco Puro */

  /* ---- Escala de pantalla (derivada — cubre los huecos de la paleta de 3) ---- */
  --bl-noche:            #14100D;  /* negro de calle nocturna: nunca #000, conserva el marrón del sodio */
  --bl-carbon:           #3A322B;  /* escalón intermedio: bordes, divisores, superficies elevadas */
  --bl-piedra:           #B4A79A;  /* texto secundario sobre oscuro — 7.36:1 AAA */
  --bl-humo:             #F0EDE6;  /* blanco de rótulo para texto largo; #FFF puro vibra en OLED */
  --bl-ambar:            #FFB020;  /* SOLO halo, glow y motion. Jamás superficie ni tipografía */
  --bl-alerta:           #E4002B;  /* acento de tensión ≤5% de superficie. Nunca en pieza institucional */

  /* ---- Roles semánticos · tema oscuro (DEFAULT DECLARADO en digital) ---- */
  --bl-bg:               var(--bl-espresso);
  --bl-bg-elevado:       var(--bl-carbon);
  --bl-texto:            var(--bl-humo);        /* 14.79:1 */
  --bl-texto-secundario: var(--bl-piedra);      /* 7.36:1 */
  --bl-texto-enfasis:    var(--bl-solar);       /* 13.89:1 */
  --bl-borde:            var(--bl-carbon);
  --bl-borde-fuerte:     var(--bl-piedra);
  --bl-accion:           var(--bl-solar);
  --bl-accion-texto:     var(--bl-espresso);    /* 13.89:1 — espresso SOBRE amarillo */

  /* ---- Roles semánticos · tema claro (OOH impreso y piezas sobre amarillo) ---- */
  --bl-claro-bg:         var(--bl-solar);
  --bl-claro-texto:      var(--bl-espresso);
  --bl-claro-borde:      var(--bl-espresso);

  /* ---- Tipografía ----
     Barques: SOLO logo y display en MAYÚSCULAS. No tiene á é í ó ú ñ Ñ Í Ú (140 glifos).
     Outfit: todo lo demás. Cobertura latina completa. Ver design-tokens.md §fuente→superficie. */
  --bl-font-display: "Barques", "Archivo", "Arial Black", system-ui, sans-serif;
  --bl-font-texto:   "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bl-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Escala tipográfica — ratio 1.333 (cuarta justa), base 16px */
  --bl-t-xs:   0.75rem;   /* 12px · códigos, metadatos */
  --bl-t-sm:   0.875rem;  /* 14px · labels, leyendas */
  --bl-t-base: 1rem;      /* 16px · cuerpo mínimo */
  --bl-t-md:   1.333rem;  /* 21px · cuerpo destacado */
  --bl-t-lg:   1.777rem;  /* 28px · subtítulo */
  --bl-t-xl:   2.369rem;  /* 38px · título de sección */
  --bl-t-2xl:  3.157rem;  /* 51px · display */
  --bl-t-3xl:  4.209rem;  /* 67px · hero */
  --bl-t-4xl:  5.61rem;   /* 90px · hero grande */

  --bl-lh-tight:  1.02;   /* display en Barques: el globo se ajusta al bloque */
  --bl-lh-titulo: 1.12;
  --bl-lh-texto:  1.55;
  --bl-tracking-display: -0.02em;
  --bl-tracking-label:    0.08em;  /* labels en mayúscula */

  --bl-peso-light: 300;
  --bl-peso-regular: 400;
  --bl-peso-medium: 500;
  --bl-peso-bold: 700;
  --bl-peso-extrabold: 800;

  /* ---- Espaciado · base 8pt ---- */
  --bl-e-1: 0.25rem;  --bl-e-2: 0.5rem;   --bl-e-3: 0.75rem;  --bl-e-4: 1rem;
  --bl-e-6: 1.5rem;   --bl-e-8: 2rem;     --bl-e-12: 3rem;    --bl-e-16: 4rem;
  --bl-e-24: 6rem;    --bl-e-32: 8rem;

  /* ---- El globo de diálogo (el ancla) ----
     Trazo = el asta de Barques en el peso de la pieza. El marco es tipografía, no un rectángulo aparte.
     Padding interno = altura-x. Cero radio: el globo tiene esquina viva. */
  --bl-globo-trazo:      0.125em;   /* relativo al font-size del contenido: engorda con el titular */
  --bl-globo-trazo-min:  2px;
  --bl-globo-padding:    0.55em 0.75em;
  --bl-globo-radio:      0;
  --bl-globo-cola-ancho: 0.9em;
  --bl-globo-cola-alto:  0.55em;
  --bl-globo-cola-x:     1.6em;     /* distancia desde el borde izquierdo */

  /* ---- Motion · familia MACHINERY (linear-to-snap, lock-in-place) ---- */
  --bl-ease-ignition: cubic-bezier(0.85, 0, 0.15, 1);  /* el encendido: retardo del balasto y salto seco */
  --bl-ease-lock:     cubic-bezier(0.2, 0.9, 0.1, 1);  /* la traba: arranque inmediato, frenada dura */
  --bl-ease-cut:      cubic-bezier(0.4, 0, 1, 1);      /* el corte: la luz se va, sin rebote */

  --bl-dur-ignition: 280ms;
  --bl-dur-lock:     190ms;
  --bl-dur-cut:      140ms;
  --bl-stagger:       50ms;   /* se encienden en secuencia, como los tubos de un rótulo */
  --bl-dur-max:      400ms;   /* techo duro: más que esto deja de ser hardware */

  /* ---- Halo · SOLO en fotografía y motion. Nunca box-shadow amarillo en layout estático ---- */
  --bl-halo-cerca: 0 0 24px rgba(255, 176, 32, 0.45);
  --bl-halo-lejos: 0 0 96px rgba(255, 176, 32, 0.22);

  /* ---- Accesibilidad ---- */
  --bl-foco:        2px solid var(--bl-solar);
  --bl-foco-offset: 3px;
  --bl-target-min:  44px;   /* WCAG 2.2 exige ≥24px; Backlight usa 44px por uso móvil en calle */
}

/* Estado apagado / encendido — el ancla de comportamiento (switch ON/OFF) */
[data-bl-estado="apagado"] { --bl-accion: var(--bl-carbon); --bl-texto-enfasis: var(--bl-piedra); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --bl-dur-ignition: 0ms; --bl-dur-lock: 0ms; --bl-dur-cut: 0ms; --bl-stagger: 0ms;
  }
}