/* atuq.css — el aspecto de atuq. Se registra como USER_SHEET desde `atuq.cfg`.
 *
 * ── LA PALETA SALE DEL ARTE, MEDIDA, NO ESTIMADA A OJO ─────────────────────────────────────────
 * Los cuatro tokens se muestrearon del propio medallón (`branding/icons/atuq256.png`) tomando el
 * color más frecuente de cada zona: el cuerpo del zorro, el disco de fondo, el anillo exterior y
 * los reflejos. Escribirlos «parecidos» a ojo es cómo una identidad se desalinea de su logo en tres
 * ediciones.
 *
 * ⚠ Del tablero de marca se toman la FORMA y el COLOR. Los eslóganes NO: el usuario los descartó
 * explícitamente, y esta hoja no es sitio para copy de todos modos.
 *
 * ⚠ TODO va acotado con @-moz-document a la ventana del navegador. Una hoja de nivel USER sin
 * acotar alcanza CUALQUIER documento chrome —el visor de PDF, el inspector, los diálogos— y un
 * selector genérico como `toolbar` termina pintando ventanas que nadie miró nunca.
 */

@-moz-document url("chrome://browser/content/browser.xhtml") {
  :root {
    --atuq-naranja: #c15728;   /* el zorro */
    --atuq-teal:    #1b6470;   /* el disco */
    --atuq-noche:   #04161d;   /* el anillo */
    --atuq-crema:   #f5ecde;   /* los reflejos */
    --atuq-radio: 8px;
  }

  /* La pestaña activa: identidad visible sin reescribir la barra entera. */
  #tabbrowser-tabs .tabbrowser-tab[selected] .tab-background {
    border-radius: var(--atuq-radio);
    box-shadow: inset 0 -2px 0 0 var(--atuq-naranja);
  }

  /* La barra de direcciones enfocada usa el naranja del zorro en vez del azul de Firefox. */
  #urlbar[focused="true"] > #urlbar-background {
    outline-color: var(--atuq-naranja);
  }

  /* El acento del sistema (botones activos, selección de menú, foco) pasa a ser el de la marca.
   * `accent-color` es lo que Gecko usa para los widgets nativos del chrome: un solo cambio alcanza
   * a decenas de controles sin enumerar ninguno. */
  :root {
    accent-color: var(--atuq-naranja);
  }

  /* La barra lateral de pestañas verticales —los «dientes» que prende `atuq.cfg`— con el fondo del
   * medallón, para que el marco de la ventana y el icono cuenten lo mismo. */
  #sidebar-main {
    background-color: color-mix(in srgb, var(--atuq-noche) 92%, var(--atuq-teal));
  }
}